Ajax表單重新加載頁面，而不是在後臺工作

首先，基於其他建議，我嘗試過移動preventDefault（），但沒有成功。Ajax表單重新加載頁面，而不是在後臺工作

我的反饋表單使用這個JavaScript來傳遞表單字段「process.php」，並與相關的消息返回（即：「sucesss」或「失敗」）

它在做什麼，除了自己的工作，而不是停留在同一頁 'feedback.php' IT負載 'process.php' 頁面，這對... { 「數據」：「數據值」}

繼承人的代碼：

$(document).ready(
function(){ 
    $('form').submit(
     function(event){ 
      var formData = 
      { 
       'name' : $('input[name=name]').val(), 
       'page' : $('input[name=page]').val() 
      }; 

      $('.form-group').removeClass('has-error'); // remove the error class 
      $('.error').remove(); // remove the error text 

      event.preventDefault(); 

      $.ajax({ 
        type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
        url  : 'process.php', // the url where we want to POST 
        data  : formData, // our data object 
        dataType : 'json', // what type of data do we expect back from the server 
        encode : true 
       }) 

      .done(function(data){ 
        if (! data.success) 
        { 
         if (data.errors.name) 
         { 
          $('#name-group').addClass('has-error'); // add the error class to show red input 
          $('#nameField').append(data.errors.name); // add the actual error name under our input 
         } 
        } 
        else 
        { 
         $('form').append('<div class="buttonError">Message Sent!</div>'); 
         form.myButton.disabled = true; 
        } 
       } 
      ); 

      .fail(function(data){ 
        $('form').append('<div class="buttonError">Failed!</div>'); 
       } 
       console.log(data); 
      ); 
      event.preventDefault(); 
     } 
    ); 
});

來源

2016-10-05 user6852183

檢查瀏覽器的控制檯中是否存在錯誤。您可能需要啓用*「保留日誌」*（或您的瀏覽器的等效功能）以在頁面導航後保留任何消息 – Phil

請發佈您的表單html – snit80

看起來像'.fail'周圍的語法錯誤。在** console.log下面移動結束'}'**。 **投票關閉作爲錯字** – Phil

-1

刪除方法並在HTML文件的表單標籤中執行操作。這看起來很好。讓我知道如果它不起作用。

來源

2016-10-05 03:15:11 borngeek

這不是解決問題。事實上，它甚至不會工作，因爲它只是將表單轉換爲對當前頁面發出的「GET」請求。 OP需要修復他們的JS錯誤 – Phil

@Phil他們應該使用控制檯來做那件事情。 – borngeek

[沒有開玩笑]（http://stackoverflow.com/questions/39864824/ajax-form-reloading-page-instead-of-working-in-the-background/39864868?noredirect=1#comment67017520_39864824） – Phil

看起來像調用$阿賈克斯語法錯誤，應該這樣來修正：

$.ajax({ 
     type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
     url  : 'process.php', // the url where we want to POST 
     data  : formData, // our data object 
     dataType : 'json', // what type of data do we expect back from the server 
     encode : true 
    }).done(function(data){ 
     if (! data.success) 
     { 
      if (data.errors.name) 
      { 
       $('#name-group').addClass('has-error'); // add the error class to show red input 
       $('#nameField').append(data.errors.name); // add the actual error name under our input 
      } 
     } 
     else 
     { 
      $('form').append('<div class="buttonError">Message Sent!</div>'); 
      form.myButton.disabled = true; 
     } 
    }).fail(function(data){ 
     $('form').append('<div class="buttonError">Failed!</div>'); 
     console.log(data); 
    });

來源

2016-10-05 07:59:50

Ajax表單重新加載頁面，而不是在後臺工作

回答

相關問題