【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,具體如下圖所示: