我將實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Ajax頁(yè)面無(wú)刷新進(jìn)行用戶驗(yàn)證案例：
效果如下圖：
實(shí)現(xiàn)主要過(guò)程：
在UsersAction類(lèi)中的checkUser方法中接收并驗(yàn)證前臺(tái)的表單數(shù)據(jù)，針對(duì)不同情況，返回一個(gè)狀態(tài)碼code給jsp頁(yè)面，然后在ajax1.jsp中通過(guò)$.post方法接受后臺(tái)傳遞過(guò)來(lái)的狀態(tài)碼
做出不同的響應(yīng)。
具體代碼如下：
1.實(shí)體類(lèi)
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類(lèi)
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
%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
base href="%=basePath%>" rel="external nofollow" >
title>Ajax練習(xí)/title>
meta http-equiv="pragma" content="no-cache">
meta http-equiv="cache-control" content="no-cache">
meta http-equiv="expires" content="0">
meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
meta http-equiv="description" content="This is my page">
!--
link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
-->
script type="text/javascript" src="js/jquery-1.9.1.js">/script>
script>
$(function() {
$("#btok").click(function() {
//獲取數(shù)據(jù)
var uname = $("#uname").val();
var passwd = $("#passwd").val();
//將數(shù)據(jù)組織為json格式
var json = {"us.uname":uname,"us.passwd":passwd};
//進(jìn)行異步請(qǐng)求
$.post("checkUser.action",json,function(msg){
if(msg == '0') {
alert("用戶名和密碼錯(cuò)誤！");
return;
}
if(msg == '1') {
$("#uerror").html("用戶名錯(cuò)誤！");
return;
} else {
$("#uerror").html("*");
}
if(msg == '2') {
$("#perror").html("密碼錯(cuò)誤！");
return;
} else {
$("#perror").html("*");
}
if(msg == '200') {
alert("登陸成功！");
return;
}
});
});
});
/script>
/head>
body>
form name="form1" method="post" action="">
table width="450" border="1" align="center" cellpadding="1" cellspacing="0">
tr>
td colspan="2" align="center" valign="middle" bgcolor="#FFFFCC">用戶注冊(cè)/td>
/tr>
tr>
td width="88">賬號(hào):/td>
td width="352">label for="uname">/label>
input type="text" name="uname" id="uname">
span id="uerror" style="color:#F06;">*/span>/td>
/tr>
tr>
td>密碼:/td>
td>label for="passwd">/label>
input type="password" name="passwd" id="passwd">
span id="perror" style="color:#F06;">*/span>/td>
/tr>
tr align="center" valign="middle" bgcolor="#FFFFCC">
td colspan="2">input type="button" name="button" id="btok" value="確定">
input type="reset" name="button2" id="button2" value="重置">/td>
/tr>
/table>
/form>
br>
/body>
/html>
以上所述是小編給大家介紹的Ajax的簡(jiǎn)單實(shí)用實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- ajax局部刷新實(shí)例 (三種方法推薦)
- Ajax和$.ajax使用實(shí)例詳解(推薦)
- spring mvc 和ajax異步交互完整實(shí)例代碼
- ajax與json 獲取數(shù)據(jù)并在前臺(tái)使用簡(jiǎn)單實(shí)例
- springMVC+ajax實(shí)現(xiàn)文件上傳且?guī)нM(jìn)度條實(shí)例
