Question

我正在使用以下代码通过Ajax发布表单，一切正常：

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

$(".button2").submit(function() { return false; });
$(".button3").submit(function() { return false; });
$(".button4").submit(function() { return false; });

$(document).on("click",'.button1, .button2, .button3, .button4', function() {

    var formData = $(this).closest('.bookroom1, .bookroom2, .bookroom3, .bookroom4').serializeArray();
    formData.push({ name: this.name, value: this.value });

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

            if (response.status == 'success') {
                $('.bookroom1, .bookroom2, .bookroom3, .bookroom4')[0].reset();
            }

            $('.booking-main').html(response.content);
            $('.booking-side-response').html(response.sidebar);

            $("a[rel^='prettyPhoto']").prettyPhoto();

        }
    });

    $('.booking-main').html('<img src="http://website.com/loading.gif" alt="Loading...">');
    $('.booking-side-response').html('<img src="http://website.com/loading.gif" alt="Loading...">');

});

});

提交Ajax时，此代码会删除响应区域中的现有内容，并将其替换为加载gif，直到响应出现：

$('.booking-main').html('<img src="http://website.com/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://website.com/loading.gif" alt="Loading...">');

如果我删除这两行，那么没有加载gif显示Ajax中断（根据JS错误控制台无法加载），表单是使用GET提交的，所有数据都显示在浏览器URL栏中。

有谁知道造成这种情况的原因是什么？

我只想将旧的div内容替换为新的Ajax响应内容，其间没有loading.gif。

当我没有使用.html重置Ajax响应区域时，jQuery Ajax发布中断

0 个答案: