爲什麼不使用AJAX提交此表單？

我正在嘗試將表單提交給Campaign Monitor。他們提供this代碼示例通過Ajax進行POST。爲什麼不使用AJAX提交此表單？

這是我的多步模態代碼。

  var next_step = false; 
      var final_step = false; 

      $('.next').on('click', function(e){ 
      e.preventDefault(); 

       if (next_step) { 
       $('#step-1').slideUp(function(){ 
        $('#step-2').slideDown(); 
        $('.next').html('Submit');// Change button text to submit 
        final_step = true; 
       });  
       } 
       next_step = true; 

       if (final_step) { 
       $('#myform').submit(function (e){ 
        alert('submit started'); //This never fires unless I remove the preventDefault(); 
        e.preventDefault();//But if I remove this, the page will refresh 
        $.getJSON(
        this.action + "?callback=?", 
        $(this).serialize(), 
        function (data) { 
        if (data.Status === 400) { 
         alert('error'); 
        } else { 
         alert('success'); 
        }       
        }) 
       }); 
       } 
      });

在表格的最後一步，我檢查final_step是否屬實，如果是的話，繼續前進，通過AJAX提交表單。

問題是它只是沒有做任何事情？但是，如果我從$('#myform')中刪除e.preventDefault();，它會按照正常的方式發佈表單，並將您重定向到表單網址。

我該如何解決這個問題？

來源

2016-08-16 ProEvilz

刪除'if（data.Status === 400）{'condition並檢查響應存在 – Maxx

爲什麼使用'？callback =？'？你在使用JSONP嗎？ – Maxx

'getJSON'將發出'GET'請求而不是POST。要發佈POST請求，您可能想要使用$ .ajax或$ .post和JSONP參數化 – devnull69

你現在正在做的是連接一個onsubmit處理程序。未調用提交。

$('#myform').submit(function (e){ });

...是一回事......

<form action="#" method="post" onsubmit="return someFunction()">

...這是一樣的...

$('#myForm').on('submit', function(e){});

您從不提交表格。

您正在尋找的是使用Ajax將數據發佈到服務器，而不是提交表單。

可以是這樣做的：

$.ajax({ 
    type: "POST", 
    url: "SomeUrl.aspx", 
    data: dataString, 
    success: function() { 
     //display message back to user here 
    } 
    });

dataString將與您發佈的值來代替。

來源

2016-08-16 14:54:08 ListenFirst

此行：$('#myform').submit(function (e) {將您作爲參數傳遞的函數註冊爲表單提交事件的處理程序，並且不會調用提交操作。我不知道這是否是問題，但我會建議preventDefault()外向導的流動

（如

$(document).ready(function() { 
    $("#form").submit(function(e) { 
     e.preventDefault(); 
    } 

});

）

然後裏面的if(final_step)只是做post無擔心形式。

另外，如果你不想使用它的功能，你不需要在表單中設置提交按鈕。只需使用單擊事件創建一個元素，該事件將發送數據而不是註冊到表單的提交事件。

來源

2016-08-16 14:36:07 Glubus

我不使用類型submit的按鈕輸入，而是使用帶有jquery'.on（'click'）;'的標準錨標籤。根據你的解釋，發佈表單並使用'.on（'submit'）'來防止頁面刷新而不是'.submit（）;'是不是更好？ – ProEvilz

您可以在提交表單的最後一頁創建一個按鈕，然後在表單的提交事件中完成所有發佈內容。儘管認識到這個調用是關鍵的：'$（'＃myform'）。submit（function（e）{'（和範圍的其餘部分）不會調用表單的提交功能，註冊給定函數作爲處理程序的形式，我建議刪除這一行，然後執行'if（final_step）'子句中傳遞給'$ .submit（）'的函數中的所有內容。重複聲明事件'e'（在'.click（）'和'$ .submit（）'） – Glubus

另外，你說'alert（）'被調用，而你現在聲稱沒有元素調用表單的'.submit（）'事件，所以這裏也有些可疑的事情發生，因爲如果沒有提交'＃form'，'alert（）'不可能被執行。 – Glubus

我不確定，但我總是在點擊元素後執行$('#form').submit()，並在其他位置捕獲此事件（例如，通過$('#form').on('submit', function() { .. });）。

來源

2016-08-16 14:49:24 ventaquil

  $('#myform').submit(function (e){

只是註冊了一個事件處理程序，並將其附加到「myForm會」的「提交」事件，它實際上並沒有引起提交。這意味着你希望每次提交表單時都要運行這個函數。這個處理函數應該是以外的你的$('.next').on('click', function(e){區塊。就在它下面會做。

如果在$('.next').on('click', function(e){塊內，你希望引起提交表格，寫上：

$('#myform').submit();

這實際上將觸發表單提交。

請參閱https://api.jquery.com/submit/以獲取有關「submit」的不同方法簽名實際執行的更多信息。

來源

2016-08-16 14:53:35 ADyson

爲什麼不使用AJAX提交此表單？

回答

相關問題