您的位置:首页 > 产品设计 > UI/UE

ajax在easyui里面的应用举例2-登录验证

2014-03-06 18:00 357 查看
<script > 
var loginDialog;  
    $(function(){  
        loginDialog = $('#loginDialog').dialog({  
            closable: true,  
            modal:true,  
            closed:true,  
            buttons:[{  
                         text:'登录',   
                         handler:function(){  
                         //console.info('点击登陆按钮了');  
                           
                         $('#loginForm').form('submit',{
                                     url:'loginAction',
                                     onSubmit:function(){
                                     if($('#loginForm').form('validate'))  checkSubmitFlg=true;
                                     else console.info("error");
                                     return $('#loginForm').form('validate');
                                     },
    
                         success: function(data) {
                                     /* console.info("ok");
                                     alert(data); */ 
                                     console.info("oks");
                                     if(checkSubmitFlg) {
                                     var userName = $("#userName").val();
                                     var psd = $("#psd").val();
                                     var vercode = $("#vercode").val();
                                     var url1 = "isExistName";
                                     var url2 = "isMatch";
                                     var url3 = "isVercodeCorrect";
         
                                     console.info("ok1");
                                     console.info(psd);
                                     var result1 = $.ajax({
                                                         url:url1,
                                                         dataType:"json",
                                                         data:{userName : userName},
                                                         async:false,
                                                         type:"post"
                                                         }).responseText;
                                     if(result1=="") {$("#error").html("用户不存在"); return false;}
         
                                     var result2 = $.ajax({
                                                         url:url2,
                                                         dataType:"json",
                                                         data:{userName : userName,psd:psd},
                                                         async:false,
                                                         type:"post"
                                                         }).responseText;
                                     if(result2=="") {$("#error").html("用户名或密码错误"); return false;}
                                     
                                     var result3 = $.ajax({
                                                         url:url3,
                                                         dataType:"json",
                                                         data:{vercode : vercode},
                                                         async:false,
                                                         type:"post"
                                                         }).responseText;
                                                         if(result3=="") {
                                                         $("#errorVer").html("请输入正确的验证码"); 
	                                                     refresh();
                                                         return false; }
                                     
                                     $('#loginForm').submit();$('#loginForm').form('clear');
                                     }
         
                                   }
    
                                 });
                           console.info("submit");
                           }  
                     }]  
         });  
         
    });  

</script>

<script type="text/javascript">
  function refresh()
  {
	  var timenow = new Date().getTime(); 
	  // 重新获取验证码图片的src属性
	  document.getElementById("authImg").src="auth.jpg?d="+timenow;
  }
  function changeValidateCode(obj) 
  {  
      //获取当前的时间作为参数,无具体意义  
      var timenow = new Date().getTime();  
      //每次请求需要一个不同的参数,否则可能会返回同样的验证码  
      //这和浏览器的缓存机制有关系,也可以把页面设置为不缓存,这样就不用这个参数了。  
      obj.src="auth.jpg?d="+timenow;  
  } 
  </script>


<body>
  主页
  <div>
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="loginDialog.dialog('open');">登录</a>
  </div>
 <div id="loginDialog" style="width:400px;height:300px;" >
 <form id=loginForm method="post" >
 <div style="color:#F00;font-size:15px" id="error"><p></p></div>
   <table>
   <tr>
   		<th>用户名</th>
   		<td><input class="easyui-validatebox" id="userName" name ="userName" data-options="required:true"/></td>
   </tr>
   <tr>
   		<th>密   码</th>
   		<td><input class="easyui-validatebox" id = "psd" name ="psd" type="password" data-options="required:true"/></td>
   </tr>
   
   <tr>
        <th>验证码</th>
        <td>
        <img src="auth.jpg" id="authImg" onclick="changeValidateCode(this)"/>看不清?<a href="javascript:refresh();">单击此处刷新</a>
        </td>
   </tr>
   
   <tr>
   		<td style="font-size:12px">请输入验证码</td>
   		<td><input class="easyui-validatebox" id = "vercode" name ="vercode"  data-options="required:true"/></td>
   		<td><div style="color:#F00;font-size:15px" id="errorVer"><p></p></div></td>
   </tr>
  </table>
  </form>
   <h4> <a href="/healthcloudpro/manager/subsystem/main/registrate.jsp">注册</a></h4>
 </div>
  </body>


package com.healthcloud.framework.subsystem.main.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import com.healthcloud.framework.core.base.action.BaseAction;
import com.healthcloud.framework.subsystem.main.service.mainUserinfoService;

import org.springframework.stereotype.Controller;

@Controller //标注控制层的主键

public class isNameExistAction extends BaseAction {

    private static final long serialVersionUID = 1L;

    @Resource
    private mainUserinfoService userinfoService;
    
    @Action(value = "/isExistName")
    @Override 
    public String execute() {
    	HttpServletResponse response = ServletActionContext.getResponse();
    	String uName;
    	
    	uName = httpServletRequest.getParameter("userName");
    	
    	if(userinfoService.isExist(uName)) {
    		
    		PrintWriter out;
			try {
				out = response.getWriter();
				out.print("exist");
				out.close();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
    		
    		return "exist";
    	}
    	else { 
    		return null;
    	}
    }

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: