Struts2 Jquery Json 实现AJax表单验证
弄了一整天了，刚开始学习Jquery，很多东西还不熟，看看视频，查查资料，终于成功的集成Struts2+Jquery+Json
直接上图:用户名输入xxx,焦点丢失，提示”用户已存在“，否则提示“可以注册“，密码同样如此,
首先需要导包：如下除了struts2必须的包外，还有json包以及涉及的commons的几个包.
此外要下载Jquery的js文件，然后部署到下图位置，当然位置可以任意，
之后就开始我们的ajax之路吧
1.首先是index源代码：其中涉及Jquery的语法，自己去查api
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<styletype="text/css">
#login{
width:410px;
margin:autoauto;
margin-top:71px;
background-color:gray;
}
#name{
font-size:14px;
color:red;
}
#pass{
font-size:14px;
color:red;
}
</style>
<scripttype="text/javascript"src="Jquery/jquery-1.4.2.js"
mce></script>
<scripttype="text/javascript">
$(document).ready(function(){
//使用Ajax的方式判断登录
$("#userName").blur(function(){
varurl='login.action';
//获取表单值，并以json的数据形式保存到params中
varparams={
userName:$("#userName").val(),
password:$("#password").val(),
}
//使用$.post方式
$.post(
url,//服务器要接受的url
params,//传递的参数
functioncallback(data){//服务器返回后执行的函数参数data保存的就是服务器发送到客户端的数据
//alert(data);
varmember=eval("("+data+")");//包数据解析为json格式
if(member.name=="yes"){
$('#name').html("用户已存在!");}
else{
$('#name').html("可以注册!");
}
},
'json'//数据传递的类型json
);
});
$("#password").blur(function(){
varurl='login.action';
//获取表单值，并以json的数据形式保存到params中
varparams={
loginName:$("#userName").val(),
password:$("#password").val(),
}
//使用$.post方式
$.post(
url,//服务器要接受的url
params,//传递的参数
functioncallback(data){//服务器返回后执行的函数参数data保存的就是服务器发送到客户端的数据
//alert(data);
varmember=eval("("+data+")");//包数据解析为json格式
if(member.pass=="no"){
$('#pass').html("密码不正确!");}
else{
$('#pass').html("可以注册!");
}
},
'json'//数据传递的类型json
);
});
});
</script>
</head>
<body>
<divid="login">
<table>
<tr>
<td>
<span>用户名：</span>
</td>
<td>
<inputtype="text"id="userName"name="userName"style="width:170px;">
</td><td>
<div>
<spanid="name"></span>
</div>
</td>
</tr>
<tr>
<td>
<span>密码：</span>
</td>
<td>
<inputtype="password"name="password"id="password"style="width:170px;">
</td><td>
<div>
<spanid="pass"></span>
</div>
</td>
</tr>
<tr>
<tdcolspan="3">
<inputtype="button"value="注册"/>
</td>
</tr>
</table>
</div>
</body>
</html>2.然后就是我们的Action，具体位置如上图。
package com.ajax.demo;
importjava.util.HashMap;
importjava.util.Map;
importnet.sf.json.JSONObject;
importcom.opensymphony.xwork2.ActionSupport;
publicclassLoginActionextendsActionSupport{
//用户Ajax返回数据
privateStringresult;
//struts的属性驱动模式，自动填充页面的属性到这里
privateStringuserName;
privateStringpassword;
@Override
publicStringexecute(){
//用一个Map存储数据
Map<String,String>map=newHashMap<String,String>();
//为map添加一条数据,记录页面传过来userName
map.put("userName",this.userName);
if("xxx".equals(userName)){
map.put("name","yes");//如果用户名xxx则提示已存在,否则可以注册
}else{
map.put("name","no");
}
if("xxx".equals(password)){
map.put("pass","yes");//如果密码xxx则可以注册,否则密码不正确
}else{
map.put("pass","no");
}
//将要返回的map对象进行json处理
JSONObjectjo=JSONObject.fromObject(map);
//调用json对象的toString方法转换为字符串然后赋值给result
this.result=jo.toString();
return SUCCESS; }public String getResult() {
returnresult;
}public void setResult(String result) {
this.result=result;
}
publicStringgetUserName(){
returnuserName;
}public void setUserName(String userName) {
this.userName=userName;
}public String getPassword() {
returnpassword;
}public void setPassword(String password) {
this.password=password;
}
}3.我们必不可少的web.xml，相信大家都知道,
<?xml version="1.0" encoding="UTF-8"?>
<web-appversion="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<filter-name>struts-cleanup</filter-name>
<filter-class>org.apache.struts2.dispatcher.ActionContextCleanUp</filter-class>
</filter>
<filter-mapping>
<filter-name>struts-cleanup</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
4. 接下来最后一步 我们的struts.xml<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPEstrutsPUBLIC
"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<packagename="ajax"extends="json-default">
<actionname="login"class="com.ajax.demo.LoginAction">
<!--返回类型为json在sjon-default中定义-->
<resulttype="json">
<!--root的值对应要返回的值的属性-->
<!--这里的result值即是对应action中的result-->
<paramname="root">result</param>
</result>
</action>
</package>
</struts>OK,今天就写到这里了，可以睡觉了.明天继续java.
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo