本機表單提交后的ajax $ .post函數

Question

我正在嘗試使用以下代碼原生提交表單：

$('#invoices-bundle').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    this.submit();
    $.post('php/seller/invoice/invoice_print_batch.php', function(data){
        $('#added-invoices').html(data);                                             
    });// use the native submit method of the form element   
});

提交后（）; 我想用我的PHP腳本的內容填充DOM。 奇怪的是，在我第一次提交表單時，DOM沒有填充，但第二次和之后的每次都會填充。

不知道為什么會這樣！ 有什么建議么？

謝謝！

Answer 1

用this.submit();提交表單后this.submit(); ，其余的代碼將是無用的。 該頁面將被更改或刷新，並在ajax代碼將被打破。 使表單作為ajax發布，而不是常規表單提交或更改代碼的順序，最后將submit() 。

Answer 2

如果你想通過AJAX提交，那么你為什么要包括評論'使用本機提交'（這似乎與你的防止默認設置相沖突）？

它好像你不會需要執行時您正在執行的AJAX后提交操作-它執行的時候了; 你希望收集POST返回值並將它們提供給invoice_print_batch.php頁面嗎？ 頁面上是否還有需要發送的表單元素？ 填充這些變量並將它們發送到$.post調用的data參數中。

$('#invoices-bundle').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    var itemToSend = form.find('input[name="inputsName"]').val();
    // ...more?
    $.post('invoice_print_batch.php', { value: itemToSend }, function(data) {
        $('#added-invoices').html(data);
    });
});

這里的value將在invoice_print_batch.php的$ _POST中。

表單的自然提交已被避免，頁面上的值已發送到您的php頁面，並且該php POST的結果可以在您當前頁面上更新。

如果您的實際頁面處理發生在當前頁面上，您可能希望將處理移動到invoice_print_batch.php - 可能重命名該文件 - 並讓該頁面處理所有表單輸入並返回/打印'回答'。 最終結果將是一個感覺更靈敏的頁面，沒有任何頁面加載/重定向來處理提交。

你需要完整的路徑嗎？ 為了便於閱讀，我縮短了它，如果當前頁面位於同一目錄中，您可以這樣做 - 它可能不是。