日期:2014-05-16  浏览次数:20586 次

S2SH整合JQuery+Ajax实现登录验证功能

 

不多说了,上码

 

action

package com.lk.action;



import javax.annotation.Resource;

import com.googlecode.jsonplugin.annotations.JSON;
import com.lk.service.StudentControl;
import com.opensymphony.xwork2.ActionSupport;

public class LoginAjaxAction extends ActionSupport {

	private String username;
	private StudentControl studentControl;

	@JSON(serialize=false) //setStudentControl利用了spring,很重要,让studentControl不序列化,如果序列化会报错
	public StudentControl getStudentControl() {//这个错,找了好久...ajax一直返回error
		return studentControl;
	}

	@Resource(name="studentControl")
	public void setStudentControl(StudentControl studentControl) {
		this.studentControl = studentControl;
	}


	public String getUsername() {
		return username;
	}


	public void setUsername(String username) {
		this.username = username;
	}


	@Override
	public String execute() throws Exception {
		if(studentControl.getStudentById(Integer.parseInt(username))!=null){
			username = "用户存在";
		}else{
			username = "用户不存在";
		}
		
		return "success";
	}
}


上面的最重要的就是那个 @JSON(serialize=false)  。。。上面有注释。。。。

 

struts.xml

 <package name="ajax" extends="json-default">
        <action name="loginAjax" class="com.lk.action.LoginAjaxAction">
            <result type="json" />
        </action>            
    </package>


这里要说的就是 json-default是继承自struts-default ....

 

login.html

//用户名 绑定的事件 焦点的移入和移出
          	$("#un").bind({
          		focus:function(){
          			$(this).addClass("txtclick");
          		},
          		blur:function(){
          			var vtxt = $("#un").val();
          			if (vtxt.length == 0) {
                        $("#unerror").html("用户名不能为空");
                        $(this).removeClass("txtclick"); 
                  	  }else if(!isInteger(vtxt)){
                        //检测用户名格式是否正确  
                        $("#unerror").html("格式不正确!");
                        $(this).removeClass("txtclick"); 
                   	  }else{
                    	$.ajax({
                    		url : "loginAjax",
                    		dataType : "json",
                    		data : {
                    			username : $(this).val(),
                    			time : Math.random()*1000
                    		},
                    		success : function(data){
								alert("成功"+data.username);
							},
							error : function(){
								alert("错误");
							}
                    	})
                      }
          			}
          	});

上面的 time : Math.random()*1000  没有什么实际意义 主要是防止缓存影响异步刷新。。。初稿,功能实现了,后面可以慢慢改