JQuery的POST功能

我使用這個jQuery功能發佈形式：JQuery的POST功能

function SubmitForm(form, postaction) { 
    $(form).submit(function(event){ 
     $('#LoadingDiv').show(); 
     var data = $(this).serialize(); 
     $.post(postaction, data) 
     .success(function(result){ 
      console.log(result); 
      $('#LoadingDiv').hide(); 
      $('.tabcontent').html(result); 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 
     }) 
     .error(function(){ 
      $('.tabcontent').html('Error Loading Page'); 
      $("html, body").animate({ scrollTop: 0 }, "slow"); 

      console.log('Error loading page'); 
     }) 
     return false; 
    }); 
}

我有喜歡的形式按鈕：

<input type="submit" onclick="SubmitForm('#SearchHistoricInvoices', '/billing/viewhistoricinvoices.php');" value="Search" />

和表單標籤：

<form method="post" id="SearchHistoricInvoices">

但是當使用上面的按鈕提交表單時，它似乎刷新整個頁面而不是實際提交表單

我檢查了控制檯，並沒有錯誤

來源

2015-02-10 Charles

要綁定提交的onclick處理程序中處理。我猜，你的提交處理程序沒有被解僱，所以FORM被引用 – 2015-02-10 20:05:51

從''中刪除'type =「submit」'。這樣做會啓用您正在遇到的默認表單提交行爲。 – Brett 2015-02-10 20:14:58

你應該使用功能，而不是直接調用另一個函數內。

$('#SearchHistoricInvoices').submit(function(event){ 
      event.preventDefault() 
      $('#LoadingDiv').show(); 
      var data = $(this).serialize(); 
      $.post($(this).prop('action'), data) 
      .success(function(result){ 
       console.log(result); 
       $('#LoadingDiv').hide(); 
       $('.tabcontent').html(result); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 
      }) 
      .error(function(){ 
       $('.tabcontent').html('Error Loading Page'); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 

       console.log('Error loading page'); 
      }) 
      return false; 
     });

嘗試如所提here在第一行使用jQuery event.preventDefault()。

您的代碼應該是這樣的

function SubmitForm(form, postaction) { 
     $(form).submit(function(event){ 
      event.preventDefault() 
      $('#LoadingDiv').show(); 
      var data = $(this).serialize(); 
      $.post(postaction, data) 
      .success(function(result){ 
       console.log(result); 
       $('#LoadingDiv').hide(); 
       $('.tabcontent').html(result); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 
      }) 
      .error(function(){ 
       $('.tabcontent').html('Error Loading Page'); 
       $("html, body").animate({ scrollTop: 0 }, "slow"); 

       console.log('Error loading page'); 
      }) 
      return false; 
     }); 
    }

這將停止默認submit event並使用jQuery後發送請求。

來源

2015-02-10 20:07:40

我剛剛嘗試過這一點，#LoadingDiv顯示並不隱藏，所以我不認爲它提交正確仍然 – Charles 2015-02-10 20:13:31

@Charles這意味着你的服務器沒有發送'200 OK'響應頭。然後請求出現問題。你能從錯誤控制檯粘貼錯誤日誌嗎？ – 2015-02-10 20:17:29

有一些錯誤，說Uncaught TypeError：undefined不是函數 – Charles 2015-02-10 20:22:27

這個問題是因爲你只附上表格submit處理程序後表格已提交。改變你的邏輯使用jQuery事件掛鉤，它變得更簡單和整潔。試試這個：

<form method="post" id="SearchHistoricInvoices" action="/billing/viewhistoricinvoices.php"> 
    <!-- other inputs --> 
    <input type="submit" value="Search" /> 
</form>

$('#SearchHistoricInvoices').submit(function(event) { 
    event.preventDefault(); 
    $('#LoadingDiv').show(); 
    $.post($(this).prop('action'), $(this).serialize()).success(function(result){ 
     console.log(result); 
     $('#LoadingDiv').hide(); 
     $('.tabcontent').html(result); 
     $("html, body").animate({ scrollTop: 0 }, "slow"); 
    }).error(function(){ 
     $('.tabcontent').html('Error Loading Page'); 
     $("html, body").animate({ scrollTop: 0 }, "slow"); 
     console.log('Error loading page'); 
    }) 
});

來源

2015-02-10 20:08:06

JQuery的POST功能

回答

相關問題