如何用ajax异步登录验证实现?
ajax异步无刷新登陆实现分为四步:
<span style="white-space:pre"> </span><FORM id="shop_login_form" class="js_mmjs_validation"> <span style="white-space:pre"> </span><INPUT type="hidden" name="returnUrl"> <span style="white-space:pre"> </span><DIV class="login_form"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><DIV class="form_row js_mmjs_validation_fe_wrap"> <span style="white-space:pre"> </span><INPUT id="shop_login_username" <span style="white-space:pre"> </span>class="fe_text jsv_required js_has_dval" title=请输入用户名 <span style="white-space:pre"> </span>tabIndex="1" maxLength="60" type="text" name="username" onblur="checkName();" /> <SPAN class="shop_login_sprite icon_m"></SPAN> <span style="white-space:pre"> </span><DIV id="loginname" <span style="white-space:pre"> </span>class="validation_marked_info js_validation_marked_info" style="height:20px;"> </DIV> <span style="white-space:pre"> </span></DIV> <span style="white-space:pre"> </span><!-- END form_row-1 --> <span style="white-space:pre"> </span><DIV class="form_row js_mmjs_validation_fe_wrap"> <span style="white-space:pre"> </span><INPUT id="shop_login_password" <span style="white-space:pre"> </span>class="fe_text jsv_required js_caps_passwd js_has_dval" <span style="white-space:pre"> </span>title="密码不能小于6位,密码前后不能包含空格" tabIndex="2" type="password" <span style="white-space:pre"> </span>name="password" onblur="checkPass();" /> <SPAN <span style="white-space:pre"> </span>class="shop_login_sprite icon_p"></SPAN> <span style="white-space:pre"> </span><DIV id="loginmessage" <span style="white-space:pre"> </span>class="validation_marked_info js_validation_marked_info" style="height:20px;"> </DIV> <span style="white-space:pre"> </span></DIV> <span style="white-space:pre"> </span><!--需要验证码--> <span style="white-space:pre"> </span><!-- END form_row-3 --> <span style="white-space:pre"> </span><DIV class="form_row radio_Box"> <span style="white-space:pre"> </span><INPUT id="shop_login_cookie" value=true type=checkBox <span style="white-space:pre"> </span>name=autoLogin> <span style="white-space:pre"> </span><!-- 两周内自动登录 --> <span style="white-space:pre"> </span><SPAN class="shop_login_sprite a_l c_radio js_c_radio">两周内免登录</SPAN> <span style="white-space:pre"> </span></DIV> <span style="white-space:pre"> </span><!-- END form_row-4 --> <span style="white-space:pre"> </span><DIV> <span style="white-space:pre"> </span><img src="/shopping/frontPage/login_files/login_btn.jpg" id="btn" onclick="btnSubmit();" /> <span style="white-space:pre"> </span></DIV> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span></DIV> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><!-- END form_row-5 --> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span></FORM>
ajax代码如下:
<script type="text/javascript"> var xmlhttp; //声明异步请求对象 //根据不同浏览器产生异步请求对象 function doAjax() { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } catch (e) { } } } } function btnSubmit() { xmlhttp=null; var name = document.getElementById("shop_login_username").value; var pass = document.getElementById("shop_login_password").value; var url = "/shopping/doLoginServlet"; //1.产生异步请求对象 doAjax(); if (xmlhttp == null || name == "" || pass=="") { return; } if(!checkName()&checkPass()){ return; } //2.建立连接 xmlhttp.open("post",url,true); //3.指定回调函数 xmlhttp.onreadystatechange = rollback; //如果以post方式请求,必须要添加 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //4.发送请求,get请求方式时传null xmlhttp.send("name=" + name+"&pass="+pass); } function rollback(){ var divName=document.getElementById("loginmessage"); divName.innerHTML=""; //当响应完成且响应结果是正常时再进行处理 if(xmlhttp.readyState==4&&xmlhttp.status==200){ var result=xmlhttp.responseText; //获得响应结果,如果是xml内容需要使用responseXML if(result=="登录成功"){ location.href="/shopping/index.jsp"; return; } divName.innerHTML=result; //将响应结果显示在页面上 } } </script>原文链接:https://www.f2er.com/ajax/163289.html