Struts2 Jquery Json 兑现AJax表单验证 _JavaScript

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"%>
<!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 type="text" id="userName" name="userName" style="width:170px;">
???? </td>

???? <td>
????? <div>
?????? <span id="name"></span>
????? </div>
???? </td>
??? </tr>
??? <tr>
???? <td>
????? <span>密码：</span>
???? </td>
???? <td>
????? <input type="password" name="password" id="password" style="width:170px;">
???? </td>

???? <td>
????? <div>
?????? <span id="pass"></span>
????? </div>
???? </td>
??? </tr>
??? <tr>
???? <td colspan="3">
????? <input type="button"? value="注册" />
???? </td>
??? </tr>
?? </table>
? </div>
?</body>
</html>

?2.然后就是我们的Action，具体位置如上图。

???????? package com.ajax.demo;??
?
import java.util.HashMap;??
import java.util.Map;??
?
import net.sf.json.JSONObject;??
?
import com.opensymphony.xwork2.ActionSupport;??
?
public class LoginAction extends ActionSupport {??
?
??? // 用户Ajax返回数据??
??? private String result;??
?
??? // struts的属性驱动模式，自动填充页面的属性到这里??
??? private String userName;??
??? private String password;??
?
??? @Override?
??? public String execute() {??
?
??????? // 用一个Map存储数据??
??????? Map<String, String> map = new HashMap<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处理??
??????? JSONObject jo = JSONObject.fromObject(map);??
?
??????? // 调用json对象的toString方法转换为字符串然后赋值给result??
??????? this.result = jo.toString();??
???????
?
??????? return SUCCESS;?? }

?public String getResult() {
? return result;
?}

?public void setResult(String result) {
? this.result = result;
?}

?
?public String getUserName() {
? return userName;
?}

?public void setUserName(String userName) {
? this.userName = userName;
?}

?public String getPassword() {
? return password;
?}

?public void setPassword(String password) {
? this.password = password;
?}
?
}

3.我们必不可少的web.xml，相信大家都知道,

???? <?xml version="1.0" encoding="UTF-8"?>
<web-app version="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" ?>?
<!DOCTYPE struts PUBLIC??
??? "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"??
??? "http://struts.apache.org/dtds/struts-2.0.dtd">?
?
<struts>?
?
??? <package name="ajax" extends="json-default">?
??????? <action name="login" class="com.ajax.demo.LoginAction">?
?
??????????? ?
??????????? <result type="json">?
?
??????????????? ?
??????????????? ?
??????????????? <param name="root">result</param>?
??????????? </result>?
??????? </action>?
??? </package>?
?
</struts>?

OK,今天就写到这里了，可以睡觉了.明天继续java.