jQuery：从 ajax 响应发布数据

Question

I'm posting a form via ajax which has the class "bookroom_ajax", the ajax result is returned in a separately div with the class "ajax_response", this is working fine.

But I want to return the results inside the same form it is submited from, but if I add the ajax response class to the form it doesn't work any more:

<form class="bookroom_ajax ajax_response">

Here's the jQuery ajax code:

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

It looks to me like your AJAX response doesn't contain expected data. Here's why. As soon as the button is clicked, you change the content of the form to be a loading spinner. Since bookroom_ajax and ajax_response both point to the same element, your serialized data probably doesn't contain what you expect it to contain (because there are no form elements inside the form any more). As a result, your server doesn't respond the way you expect it to and doesn't contain the data you are trying to put back inside the form element with .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);


        }
    });

});

That is my hypothesis based on the analysis of your code snippet.