<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="test.php" method="post" id="testForm">
<table>
<tr>
<td>名字</td>
<td><input type="text" id="username" οnblur="check_name()"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="提交" οnclick="test()"/></td>
</tr>
</table>
</form>
</body>
</html>
<script>
/* var flag=false;
function check_name(){
var username=document.getElementById('username').value;
var ajax=new XMLHttpRequest();
ajax.open('get','a.php?username='+username);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
if(ajax.responseText==1){
flag=true;
}
}
}
return flag;
}
function test(){
if(check_name()){
return true;
}else{
return false;
}
}*/
/*function test(){
var flag=true;
var username=document.getElementById('username').value;
var ajax=new XMLHttpRequest();
ajax.open('get','a.php?username='+username,false);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
if(ajax.responseText==1){
flag=false;
}
}
}
return flag;
}*/
function check_name() {
var username = document.getElementById('username').value;
var ajax = new XMLHttpRequest();
ajax.open('get', 'a.php?username=' + username);
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
if (ajax.responseText == 1) {
document.getElementById('testForm').submit();
}
}
}
}
function test(){
check_name();
}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="test.php" method="post" id="testForm">
<table>
<tr>
<td>名字</td>
<td><input type="text" id="username" οnblur="check_name()"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="提交" οnclick="test()"/></td>
</tr>
</table>
</form>
</body>
</html>
<script>
/* var flag=false;
function check_name(){
var username=document.getElementById('username').value;
var ajax=new XMLHttpRequest();
ajax.open('get','a.php?username='+username);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
if(ajax.responseText==1){
flag=true;
}
}
}
return flag;
}
function test(){
if(check_name()){
return true;
}else{
return false;
}
}*/
/*function test(){
var flag=true;
var username=document.getElementById('username').value;
var ajax=new XMLHttpRequest();
ajax.open('get','a.php?username='+username,false);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
if(ajax.responseText==1){
flag=false;
}
}
}
return flag;
}*/
function check_name() {
var username = document.getElementById('username').value;
var ajax = new XMLHttpRequest();
ajax.open('get', 'a.php?username=' + username);
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
if (ajax.responseText == 1) {
document.getElementById('testForm').submit();
}
}
}
}
function test(){
check_name();
}
</script>
这是三中方案
1. 这种不太好 ,在提交时会先触发验证唯一性,再次按提交再可以提交
2.这是采用同步 只有等ajax验证成功返回 这时才会提交
3.这种是把提交放到了ajax回调函数中
综合以上 :主要是要等到ajax验证成功后再提交
(如有错误 ,望各位指正 ,谢谢)