Ajax的简单实用实例代码
程序员文章站
2022-03-04 17:07:09
我将实现一个简单的ajax页面无刷新进行用户验证案例：
效果如下图：
实现主要过程：
在usersaction类中的checkuser方法中接收并验证前台的表单数...
我将实现一个简单的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
<%@ 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练习</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() {
//获取数据
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;
}
});
});
});
</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">用户注册</td>
</tr>
<tr>
<td width="88">账号:</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的简单实用实例代码，希望对大家有所帮助
上一篇： Ajax实现无刷新分页实例代码