Struts2 Jquery Json 实现AJax表单验证

最新推荐文章于 2024-05-09 10:20:25 发布

岁寒松柏

最新推荐文章于 2024-05-09 10:20:25 发布

阅读量3k

点赞数

文章标签： struts json jquery ajax string function

弄了一整天了，刚开始学习Jquery，很多东西还不熟，看看视频，查查资料，终于成功的集成Struts2+Jquery+Json

直接上图:用户名输入xxx,焦点丢失，提示”用户已存在“，否则提示“可以注册“，密码同样如此,

首先需要导包：如下除了struts2必须的包外，还有json包以及涉及的commons的几个包.

此外要下载Jquery的js文件，然后部署到下图位置，当然位置可以任意，

之后就开始我们的ajax之路吧

1.首先是index.jsp源代码：其中涉及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.

岁寒松柏

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Struts2 Jquery Json 实现AJax表单验证

弄了一整天了，刚开始学习Jquery，很多东西还不熟，看看视频，查查资料，终于成功的集成Struts2+Jquery+Json直接上图:用户名输入xxx,焦点丢失，提示”用户已存在“，否则提示“可以注册“，密码同样如此, 首先需要导包：如下除了struts2必须的包外，还有json包以及涉及的commons的几个包.此外要下载Jquery的js文件，然后部署到下图位置，当然
复制链接

扫一扫