使用表單驗證submitHandler發送2個AJAX請求？

Question

我對PHP有很深的理解，html & css，但我只是開始深入javascript & jQuery。

我面臨的問題是，我有一個頁面上的表單，我想先驗證，然後當它通過驗證提交2個Ajax請求;第一個將數據插入數據庫的表中，第二個在另一個表上運行查詢並返回結果。

我有後者工作得很好，使用submitHandler方法發送ajax請求，並用它的結果更新我的頁面上的div。當我後或這一個似乎打破之前...添加第二個Ajax調用

我的問題是應該有具有處於submitHandler 2個Ajax調用，就像下面一個問題，如果是的話會是什麼是正確的方式去做這件事，甚至更好的方式？

$("#contactform").validate({ 
    rules: ... 
    submitHandler: function() { 
     // First to insert the contact details using input#firstname etc. 
     var firstname = $("#firstname").value(); 
     var lastname = $("#lastname").value(); 
     var contactString = 'firstname='+ firstname + '&lastname=' + lastname; 
     $.ajax({ 
      type: "POST", 
      url: "insertcontact.php", 
      data: quoteString, 
      success: function(server_response){ 
       $('#yourquote').html(server_response).show(); 
      } 
     });    
     // Second use width & height submitted from previous page for processquote.php 
     var width = <?php echo json_encode($cleanpost['width']); ?>; 
     var height = <?php echo json_encode($cleanpost['height']); ?>; 
     var quoteString = 'width='+ width + '&height=' + height; 
     $.ajax({ 
      type: "POST", 
      url: "processquote.php", 
      data: quoteString, 
      success: function(server_response){ 
       $('#yourquote').html(server_response).show(); 
      } 
     }); 
    } 
}); 

我正在使用'jquery.validate.js' validation plugin。再次，我的目標是，一旦有人在我的表單上輸入了有效的詳細信息，使用Ajax將他們的聯繫人數據插入到數據庫中，然後使用上一頁上提交的字段查詢數據庫以檢索數字結果以顯示在頁面上，而無需查詢刷新。

任何你可以給我的指針將不勝感激！

羅布

編輯：學習JavaScript & Jquery的同時是不是這樣，似乎是個好主意，我一直困惑：this.value = '';與$(this).val('');如圖所示，第一2點變量聲明，這是什麼導致問題！感謝你們有用的幫助，無論如何，夥計們都會爲你提供幫助。

Answer 1

在您的第一個.ajax()調用中，您嘗試將它傳遞給您尚未創建的data:參數中的值。我相信你想要發送它contactString。

除非你的兩個查詢依賴於彼此順序完成，那麼你應該能夠異步執行它們（基本上在同一時刻）。如果您希望第二次AJAX調用在第一次之後發生，您可以始終將所有數據參數傳遞給insertcontact.php，插入完成後，使用您已經通過的值執行processquote.php。

最後，我想知道您是否有意這樣做，但是您的AJAX調用都會覆蓋#yourquote DOM元素中的任何內容並顯示它。您可能想要提供一個單獨的元素來將響應放入您的兩個請求中。也許#yourquoteinserted和#yourquoteprocessed？

編輯：BigRob，從您的評論聽起來好像你想同步AJAX查詢，檢查您的通話.ajax()的異步屬性。這是從.ajax() documentation：

異步布爾

默認：true

默認情況下，所有的請求都發送異步（即這是默認設置爲true）。如果您需要同步請求，請將此選項設置爲false。跨域請求和dataType：「jsonp」請求不支持同步操作。請注意，同步請求可能會暫時鎖定瀏覽器，並在請求處於活動狀態時禁用任何操作。

（重點煤礦）

不過，我可能是錯的這個，但你可能實際上是能夠從他人的成功函數中調用一個異步AJAX方法。如果它開始看起來太混亂了，你可能想要將內部調用提取到一個函數中。它可能看起來像粗略的估計：

$.ajax({url, data:contactString, 
    success: function(server_response) { 
     extractedId = server_response; // you can return data many ways 
     $.ajax({url2, data:quoteString+"&extra="+extractedId,... 
     }); 
    } 
}); 

如果執行在第一AJAX調用設置async:false同步調用，然後你可以只把結果存儲到外部（到AJAX調用）變量（或如果這不起作用，暫時將其存儲在某個DOM元素中）。然後JavaScript會暫停執行，直到第一個AJAX調用返回時纔會觸發您的第二個AJAX調用。

儘管現在這都是假設，並且只是基於我對如何工作的理解。