我將實現一個簡單的Ajax頁面無刷新進行用戶驗證案例：

效果如下圖：

實現主要過程：

在UsersAction類中的checkUser方法中接收并驗證前臺的表單數據，針對不同情況，返回一個狀態碼code給jsp頁面，然后在ajax1.jsp中通過$.post方法接受后臺傳遞過來的狀態碼

做出不同的響應。

具體代碼如下：

1.實體類

package com.bean;

import java.io.Serializable;

public class Users implements Serializable {

private String uname;

private String passwd;

public String getUname() {

return uname;

}

public void setUname(String uname) {

this.uname = uname;

}

public String getPasswd() {

return passwd;

}

public void setPasswd(String passwd) {

this.passwd = passwd;

}

public Users(String uname, String passwd) {

super();

this.uname = uname;

this.passwd = passwd;

}

public Users() {

super();

}

}

2.action類

package com.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import org.apache.struts2.convention.annotation.Action;

import com.bean.Users;

public class UsersAction {

private Users us;

public Users getUs() {

return us;

}

public void setUs(Users us) {

this.us = us;

}

@Action(value="checkUser")

public String checkUser() {

System.out.println("aaaaaaaaa");

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

try {

PrintWriter out = response.getWriter();

int code = 0;

if (us == null) {

out.print(0);

return null;

} else {

if (us.getUname() == null || us.getUname().trim().equals("")) {

code = 1;

out.print(code);

return null;

} else {

if (us.getPasswd() == null

|| us.getPasswd().trim().equals("")) {

code = 2;

out.print(code);

return null;

} else {

code = 200;

out.print(code);

}

}

}

out.flush();

out.close();

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return null;

}

}

3.ajax1.jsp

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

Ajax練習

$(function() {

$("#btok").click(function() {

//獲取數據

var uname = $("#uname").val();

var passwd = $("#passwd").val();

//將數據組織為json格式

var json = {"us.uname":uname,"us.passwd":passwd};

//進行異步請求

$.post("checkUser.action",json,function(msg){

if(msg == '0') {

alert("用戶名和密碼錯誤！");

return;

}

if(msg == '1') {

$("#uerror").html("用戶名錯誤！");

return;

} else {

$("#uerror").html("*");

}

if(msg == '2') {

$("#perror").html("密碼錯誤！");

return;

} else {

$("#perror").html("*");

}

if(msg == '200') {

alert("登陸成功！");

return;

}

});

});

});

用戶注冊
賬號:	*
密碼:	*

以上所述是小編給大家介紹的Ajax的簡單實用實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

總結

以上是生活随笔為你收集整理的ajax 示例代码,Ajax的简单实用实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。