Ajax再次返回整個頁面

我想添加Ajax的窗體上有一個按鈕，以便當按鈕被點擊表單提交，但不應該重新加載。Ajax再次返回整個頁面

當前它將整個頁面再次渲染到現有頁面下方。

$('document').ready(function() { 
    var form = $('#contact_us'); // contact form 
    var submit = $('button'); // submit button 
    var alert = $('#form-status'); // alert div for show alert message 

    // form submit event 
    form.on('submit', function(e) { 
     e.preventDefault(); // prevent default form submit 

     $.ajax({ 
      url: '/contact-us', // form action url 
      type: 'POST', // form submit method get/post 
      dataType: 'html', // request type html/json/xml 
      data: form.serialize(), // serialize form data 
      beforeSend: function() { 
       alert.fadeOut(); 
       submit.html('Sending....'); // change submit button text 
      }, 
      success: function(data) { 
       alert.html(data).fadeIn(); // fade in response data 
       form.trigger('reset'); // reset form 
       submit.html('Send Email'); // reset submit button text 
      }, 
      error: function(e) { 
       console.log(e) 
      } 
     }); 
    }); 
});

來源

2014-02-21 user3339224

只要你在/頁接觸我們不爲你發送格式的數據（如JSON），你不分析它，你會得到整個頁面呈現。爲什麼？由於：

alert.html(data).fadeIn(); // fade in response data

它只是在整個頁面中淡出。數據就是您從/聯繫我們獲得的所有信息。爲了解決這個問題，你必須刪除與附加整個頁面線，讓你成功的代碼應該是這樣的：

success: function(data) { 
       form.trigger('reset'); // reset form 
       submit.html('Send Email'); // reset submit button text 
      },

而且，我不建議使用警報變量名。該名稱已被使用。

來源

2014-02-21 22:57:35

謝謝丹尼爾，它有幫助。現在你可以幫助我如何在頁面重新加載後顯示成功消息？我正在做這樣的事情到底 $（'＃form-status'）。text（'SUCCESS'）; – user3339224

一旦頁面被RELOADED，你可以使用PHP的'if（$ _ POST && $ _POST ['name']）'等等。如果你的意思是一旦AJAX請求完成，你必須添加成功回調的邏輯，但沒有意義追加數據，只要它是完整的頁面。但是，您可以創建另一個php文件，發佈到新文件，並且可能會根據PHP中的驗證邏輯返回JSON格式的消息，例如。 '{'success'：true，'error'：''}' - 當一切順利並且'{'success'：false，'error'：'Error＃1：Message''} - 當出現錯誤時，，你在ajax函數中解析它，並使用'if（data.success）'來檢查。 –

Ajax再次返回整個頁面

回答

相關問題