Struts2 Jquery Json 兑现AJax表单验证

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>

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.

Struts2 Jquery Json 兑现AJax表单验证

相关推荐