[Ajax-PHP] HTML表單按下送出按鈕後,使用Ajax呼叫後台程式檢查表單內容的注意事項

作者: Fred F.M. Wang (FW知識瑣記) 日期:

javascript除了除錯不容易外, 在Ajax上也有一些奇怪的地方，下面是我爬過一些國外的技術文章與
自己多次錯誤嘗試的結果。

如果您HTML表單要在按下送出按鈕後，需要先呼叫後台程式檢查表單內容(使用Ajax)後, 再實際將
表單送到後台處理。HTML程式碼如下 :

<form action="form_action.php" id="signupForm" method="get">
...輸入資料...
  <input type="submit" value="Submit" />
</form>

有下面四點注意事項 : 

1. 表單按下送出(Submit)按鈕後, 要先用event.preventDefault() 取消表單預設送出Submit動作, 也就是的form_action.php將不會執行, 如果少這行就不會正常呼叫後台檢查表單內容的程式。

2. 再使用Ajax呼叫後台檢查表單內容的程式(check_signup.php), Ajax程式碼如下方

$('#signupForm').submit(...) 內的程式碼，如果使用GET方式傳遞參數時, 部分參數內容無法傳遞

, 例如參數值有"XXX" 時就無法傳遞，改用POST就沒有問題，因此，建議一律採用POST方式傳遞資

料給後台程式。

3.表單內容檢查完畢(也就是後台檢查表單內容的程式執行完畢)， 回傳資料給Ajax程式，如果無
誤時，執行 this.unbind('submit'); 這個功能用來先解除(unbind)檢查表單的事件處理程序,也就
是後面的this.submit()不會再呼叫自行撰寫的

$('#signupForm').submit(...) 程式 (如果不寫unbind, 會重複執行這段Ajax程式)。

4. 執行this.submit(); 等同於再按下送出(Submit)按鈕 。也就是執行form_action.php

5. $.ajax(...); 後到function結束前如果還有程式碼，就完全不會執行。

Javascript內的程式碼 :

$('#signupForm').submit(function(event){
    event.preventDefault();  // 取消表單預設送出Submit動作
    $.ajax({
        url: 'check_signup.php',  // 後台檢查表單內容的程式
        method: 'POST',
        data: {user_name:$('#user_name').val(),email:$('#email').val(),
                first_name:$('#first_name').val(),last_name:$('#last_name').val(),
                password:$('#password').val(),password2:$('#password2').val(),},
        dataType: 'json',
        success: function(data){  // 表單內容檢查完畢
            for(var input_field in data){
                $('#'+input_field+'-error').html(data[input_field]);
            }
            var if_signup = true;
            for(var key in data){
                if(data[key]!==""){
                    if_signup = false;
                    break;
                }
            }
            if(if_signup){ // 檢查無誤
                this.unbind('submit');
                this.submit();
            }
        }
     });

      //  這裡如果還有程式碼，完全不會執行。