Struts2 Jquery Json 兑现AJax表单验证
日期：2014-05-16 浏览次数：20341 次
弄了一整天了，刚开始学习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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
? <style type="text/css">
?? #login {
????? width:410px;
?????
????? margin:auto auto;
????? margin-top:71px;
????? background-color:gray;
?? }
? #name {
??? font-size:14px;
??? color:red;
? }
? #pass{
?? font-size:14px;
?? color:red;
? }
? </style>
? <script type="text/javascript" src="Jquery/jquery-1.4.2.js"
?? mce_src="Jquery/jquery-1.4.2.js"></script>
? <script type="text/javascript">??
??? $(document).ready( function() {??
??????????
??????? //使用 Ajax 的方式 判断登录??
??????? $("#userName").blur( function() {??
??????????????
??????????? var url = 'login.action';??
??????????????
???????????
??????????????
??????????? //获取表单值，并以json的数据形式保存到params中??
??????????? var params = {??
??????????????? userName:$("#userName").val(),??
??????????????? password:$("#password").val(),??
??????????? }??
??????????? //使用$.post方式??????
??????????? $.post(??
??????????????
??????????????? url,??????? //服务器要接受的url??
??????????????????
??????????????? params,???? //传递的参数???????
??????????????????
??????????????? function callback(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据??
??????????????????
??????????????????? //alert(data);??
??????????????????? var member = eval("("+data+")");??? //包数据解析为json 格式????
??????????????????? if(member.name=="yes"){
??????????????????? $('#name').html("用户已存在!");}
??????????????????? else{
??????????????????? $('#name').html("可以注册!");???
??????????????????????? }??
??????????????????????
??????????????? },???
??????????????????
??????????????? 'json'? //数据传递的类型? json??
??????????????
??????????? );??
??????????
??????? });??
??????? $("#password").blur( function() {??
???????????
??????????? var url = 'login.action';??
??????????????
???????????
??????????????
??????????? //获取表单值，并以json的数据形式保存到params中??
??????????? var params = {??
??????????????? loginName:$("#userName").val(),??
??????????????? password:$("#password").val(),??
??????????? }??
??????????? //使用$.post方式??????
??????????? $.post(??
??????????????
??????????????? url,??????? //服务器要接受的url??
??????????????????
??????????????? params,???? //传递的参数???????
??????????????????
??????????????? function callback(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据??
??????????????????
??????????????????? //alert(data);??
??????????????????? var member = eval("("+data+")");??? //包数据解析为json 格式????
??????????????????? if(member.pass=="no"){
??????????????????? $('#pass').html("密码不正确!");}
??????????????????? else{
??????????????????? $('#pass').html("可以注册!");???
??????????????????????? }??
??????????????????????
??????????????? },???
??????????????????
??????????????? 'json'? //数据传递的类型? json??
??????????????
??????????? );??
??????????
??????? });???
??? });??
</script>
?</head>
?<body>
? <div id="login">
?? <table>
??? <tr>
???? <td>
????? <span>用户名：</span>
???? </td>
???? <td>
????? <input t
