AJax验证

来源：互联网发布：北京市道路网数据下载编辑：程序博客网时间：2024/05/17 00:13

struts2用response怎么将json值返回到页面javascript解析，这里介绍一个struts2与json整合后包的用法。
1.准备工作
①ajax使用Jquery：jquery-1.4.2.min.js
②struts2与json的依赖包：struts2-json-plugin-2.2.3.jar
PS：版本可自己控制！~
2.过程
①引入json依赖包
②编写action类
③配置struts.xml
④编写页面
⑤测试

3.实例
① action类，JsonAction 注意包名

package com.zxt.action;import com.opensymphony.xwork2.ActionSupport;/** * * @Title: JsonAction.java * @Package com.zxt.action * @Description:struts2 + ajax + json用例 * @author zxt   * @date 2011-12-6 上午10:38:51 * @version V1.0 */public class JsonAction extends ActionSupport { /**  *   */ private static final long serialVersionUID = 7443363719737618408L; /**  * 姓名  */ private String name; /**  * 身高  */ private String inch; /**  * ajax返回结果，也可是其他类型的，这里以String类型为例  */ private String result; @Override public String execute() throws Exception {  // TODO Auto-generated method stub  if("张三".equals(name)) {   result = "身份验证通过,身高为" + inch;  } else    result = "不是张三！";  return SUCCESS; } public String getName() {  return name; } public void setName(String name) {  this.name = name; } public String getInch() {  return inch; } public void setInch(String inch) {  this.inch = inch; } /**  *  * @Title: getResult  * @Description:json调取结果   * @param @return     * @return String * @throws  */ public String getResult() {  return result; }

②struts配置。 struts.xml
创建一个新的package，引入json-default

 <package name="ajax" extends="json-default">      <action name="jsonAjax" class="com.zxt.action.JsonAction">        <!-- 将返回类型设置为json -->        <result type="json"></result>      </action>    </package>

③ 页面ajax写法，json.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><base href="<%=basePath%>"><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>测试</title><script type="text/javascript" src="include/js/jquery-1.4.2.min.js"></script><script type="text/javascript">   $(function() {     $("#tj").click(function() {    //提交的参数，name和inch是和struts action中对应的接收变量        var params = {           name : $("#xm").val(),           inch : $("#sg").val()        };        $.ajax({    type: "POST",    url: "jsonAjax.action",    data: params,    dataType:"text", //ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）    success: function(json){      var obj = $.parseJSON(json);  //使用这个方法解析json                var state_value = obj.result;  //result是和action中定义的result变量的get方法对应的    alert(state_value);    },    error: function(json){     alert("json=" + json);     return false;    }    });     });   });</script></head><body>  <span>姓名：</span><input id="xm" type="text">  <br/>  <span>身高：</span><input id="sg" type="text">  <br/>  <input type="button" value="提交" id="tj"></body></html>

自己做的登录验证
action

@Resource    private IEmployeeService employeeServiceImpl;    private Employee employee;    //验证码    private String checknumber;    private String loginName;    private String password;    private Map<String, Object> session;     /**      * ajax返回结果，也可是其他类型的，这里以String类型为例      */     private String result;     /*      * 当前登录管理员在session为 currentEmp      * 登录验证      */    public String login() {        //得到验证码内容，忽略大小写        String randomCode=(String) session.get("randomCode");        if(randomCode.toUpperCase().equals(checknumber.toUpperCase())){        employee=employeeServiceImpl.queryByNameAndPsw(loginName, password);        if(employee!=null)        {               //移除session中的验证码            session.remove("randomCode");            session.put("currentEmp", employee);            result = "密码正确";             }else        {               result = "密码错误";        }        }         else            {              result = "验证码错误";             }            return SUCCESS;     }    @Override    public void setSession(Map<String, Object> session) {        this.session=session;       }     /**      *      * @Title: getResult      * @Description:json调取结果       * @param @return         * @return String     * @throws      */     public String getResult() {      return result;     }    public String getChecknumber() {        return checknumber;    }    public void setChecknumber(String checknumber) {        this.checknumber = checknumber;    }    public String getLoginName() {        return loginName;    }    public void setLoginName(String loginName) {        this.loginName = loginName;    }    public String getPassword() {        return password;    }    public void setPassword(String password) {        this.password = password;    }

Strust2配置

<!-- Ajax登录验证 -->     <package name="ajax"  extends="json-default">      <action name="jsonAjax" class="com.two.strust2.action.LoginAction" method="login">        <!-- 将返回类型设置为json -->        <result type="json"></result>      </action>    </package>

js代码

function checkLogin(){      var params = {              loginName : $("#txtName").val(),              password : $("#txtPsw").val(),              checknumber : $("#txtCode").val()            };     $.ajax({//()里面是JSON数据，外层要加上{}。            url:"jsonAjax.action",//处理页面地址，表示ajax要用哪个页面处理            type:"POST",//传值方式，一般用POST方式，注意POST要大写。            data:params,//传递到处理页面的值，也是JSON数据，要用{}。如果传2个值就在{}里面加逗号，再写另外1个值。            dataType:"json",//返回值的类型。1.TEXT文本，字符串。2.JSON数据 3.XML可扩展标记语言，主要用在数据传递。            dataType:"text", //ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）            success: function(json){              var obj = $.parseJSON(json);  //使用这个方法解析json            var state_value = obj.result;  //result是和action中定义的result变量的get方法对应的            alert(state_value);            },            error: function(json){//处理页面出错以后执行的函数                alert("json=" + json);                return false;               }            });}

//密码重置复选框练习

function resetPwd() {            var flag=false;            //判断是否选中            $("input[name='employeeId']").each(              function(){                if($(this).is(':checked')){                  flag=true;            }              });            var employeeId = $("input[name='employeeId']:checked").serialize();            alert(employeeId);            if(flag){            //Ajax提交复选框            $.ajax({            url:"employee_rePsw.action",            type:"POST",        /*      traditional :true,    //这里不需要必须加上该句话来序列化   */            data:employeeId,            dataType:"html",            success: function(date){            $("#data").html(date);            }            });                alert(employeeId);                      /* document.getElementById("formid").submit(); */                      alert("密码重置成功");            }else{            alert("请至少选择一条数据！");            }

阅读全文

0 0