使用ajax异步校验数据的两种方法
两种方法:
使用js
使用jquery
一使用js
<script type="text/javascript"> //ajax异步校验 function checkUsername() { // 获得文件框值: var username = document.getElementById("username").value; // 1.创建异步交互对象 var xhr = createXmlHttp(); // 2.设置监听 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { document.getElementById("span1").innerHTML = xhr.responseText; } } } // 3.打开连接 xhr.open("GET","${pageContext.request.contextpath}/customerAction_findByName.action?time=" + new Date().getTime() + "&username=" + username,true); // 4.发送 xhr.send(null); } function createXmlHttp() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } //客户端校验 function checkForm() { $("#span1").text(""); $("#span2").text(""); $("#span3").text(""); $("#span4").text(""); var username = $("#username").val(); if (username = null || username == "") { $("#span1").text("用户名不能为空,傻吊"); return false; } else { } var password = $("#password").val(); var rePassword = $("#rePassword").val(); if (password = null || password == "") { $("#span2").text("密码不能为空哦,傻吊"); return false; } var password = $("#password").val(); if (password.length < 6) { $("#span2").text("密码不能小于6位,傻吊"); return false; } var password = $("#password").val(); var rePassword = $("#rePassword").val(); if (password !== rePassword) { $("#span3").text("密码不一致,傻吊"); return false; } var email = $("#email").val(); if (email = null || email == "") { $("#span4").text("邮箱不能为空哦,傻吊"); return false; } var re = /\w+@\w+\.\w+/g; var email = $("#email").val(); if (!re.test(email)) { $("#span4").text("邮箱格式不正确,傻吊"); return false; } } </script>
二使用jquery
<script> //ajax异步校验 function checkEmail() { var email = $("#email").val(); $.get("customerAction_findByEmail.action?email="+email+"&"+ new Date().getTime(),function(data,status){ if(status=="success"){ document.getElementById("span4").innerHTML = data; } }); } </script>