【jQuery】OnSubmit中的Ajax判斷
這個問題不止存在於jQuery的Ajax當中，還存在其餘版本的javascript庫或者原生的javascript中。關於OnSubmit在《【JavaScript】在前臺驗證表單，必須使用onsubmit="return xx()"的形式》（點選開啟連結）已經詳細說明了，但是在OnSubmit中如果帶上Ajax判斷，比較判斷這個使用者名稱是否存在等，你需要考慮Ajax函式與OnSubmit不同步的問題。
先來看一個極其簡單的例子：
首先，檔案目錄結構如下：
1.html中有一個簡單得不能再簡單的表單：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajax_onsubmit</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head> <body> <form action="2.html" method="post" onsubmit="return check()"> 1+1=<input type="text" id="text1" /> <input type="submit" value="提交" /> </form> </body> <script> function check(){ var text1=$("#text1").val(); $.ajax({ type:"POST", url:"a.php", data:{ text1 : text1 }, success:function(data){ if(data != "2"){ alert("輸入錯誤時候不能提交！"); return false; } } }); } </script> </html>
但提交到2.html之間，先要將使用者輸入的結果以Ajax的方式提交的a.php中，看a.php輸出的是不是2，a.php的程式碼如下，同樣很簡單，就是列印使用者輸入的結果。當然實際完全不用這樣做，如此簡單的事情完全可以用純javascript完成，現在只是用來說明問題。
<?php
$text1=$_REQUEST["text1"];
echo $text1;
?>a.php列印是2，才提交，否則不提交。
看似1.html中的程式碼沒有問題，直接運用到OnSubmit是否返回false來判斷表單是否能夠被提交，可是，當用戶輸入是3，執行出來的結果卻是這樣的：
成功判斷了使用者輸入的不是2，if(data!=2)這個條件結構體也進入了，可是JavaScript卻沒有阻止表單提交！這可是致命的，原因如下：
（1）ajax時return false 的function與onsubmit()不是同一個函式。
（2）在ajax執行時，async預設的設定值為true，這種情況為非同步方式，就是說當ajax傳送請求後，在等待server端返回的這個過程中，前臺會繼續 執行ajax塊後面的指令碼，直到server端返回正確的結果才會去執行success，也就是說這時候執行的是兩個執行緒，ajax塊發出請求後一個執行緒 和ajax塊後面的指令碼（另一個執行緒）。
也就是說：
這也是Ajax非同步提交的特性所使然，但是，我們要完成OnSubmit用Ajax與後臺互動的效果，只能使用dwr和Xajax這些伺服器Ajax框架了嗎？當然不是，我們修改一下Ajax的程式碼即可，上述1.html的程式碼修改如下，主要是OnSubmit函式check()的，則Ajax可以順利執行：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax_onsubmit</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<form action="2.html" method="post" onsubmit="return check()">
1+1=<input type="text" id="text1" />
<input type="submit" value="提交" />
</form>
</body>
<script>
function check(){
var text1=$("#text1").val();
var ajaxFlag=true;//用flag的方式，使得子函式$.ajax與主函式check()互動起來
$.ajax({
type:"POST",
url:"a.php",
async:false,//設定同步方式，非非同步！
cache:false,//嚴格禁止快取！
data:{
text1:text1
},
success:function(data){
if(data != "2"){
alert("輸入錯誤時候不能提交！");
ajaxFlag=false;
}
}
});
if(!ajaxFlag){
return false;
}
}
</script>
</html>
上述OnSubmit修改之後，就現實了$.ajax與onsubmit()函式的同步，其訊號量就是ajaxFlag，具體如下圖所示：
