jQuery：從ajax響應發佈數據

Question

我通過ajax發佈了一個表單，它具有類「bookroom_ajax」，ajax結果在類「ajax_response」的另一個div中返回，此工作正常。

但我想回到它是從submited同一表單中的結果，但如果我的Ajax響應類添加到形式，它不工作了：

<form class="bookroom_ajax ajax_response"> 

這裏是jQuery的AJAX代碼：

jQuery(document).ready(function($) { 

$(document).on("click",'#bookingbutton2', function() { 

    $('.ajax_response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 

    $.ajax({ 
     type: 'POST', 
     url: AJAX_URL, 
     data: $('.bookroom_ajax').serialize(), 
     dataType: 'json', 
     success: function(response) { 

      if (response.status == 'success') { 
       $('.bookroom_ajax')[0].reset(); 
      } 

      $('.ajax_response').html(response.content); 


     } 
    }); 

}); 

}); 

Answer 1

它在我看來像你的AJAX響應不包含預期的數據。這是爲什麼。只要按鈕被點擊，您將表單的內容更改爲加載微調器。由於bookroom_ajax和ajax_response都指向相同的元素，因此您的序列化數據可能不包含您期望它包含的內容（因爲表單中沒有任何表單元素）。因此，您的服務器沒有按照您期望的方式進行響應，也沒有包含您試圖在.html()表單元素內放回的數據。

$(document).on("click",'#bookingbutton2', function() { 

    // Form content replaced by a spinner 
    $('.ajax_response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">'); 

    $.ajax({ 
     type: 'POST', 
     url: AJAX_URL, 
     // Form doesn't contain data, so serialization doesn't result in expected data to be sent to the server 
     data: $('.bookroom_ajax').serialize(), 
     dataType: 'json', 
     success: function(response) { 

      if (response.status == 'success') { 
       $('.bookroom_ajax')[0].reset(); 
      } 

      // Response doesn't contain expected data 
      $('.ajax_response').html(response.content); 


     } 
    }); 

}); 

這是我基於對你的代碼片段的分析的假設。