Question

我通过ajax发布了一个表格＆＃34; bookroom_ajax＆＃34;，ajax结果在一个单独的div中返回，类别为＃34; ajax_response＆＃34;，这是有效的细

但我希望将结果返回到它所提交的相同表单中，但是如果我将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);


        }
    });

});

这是我的假设，基于对您的代码段的分析。

jQuery：从ajax响应发布数据

1 个答案: