Question

我有一个包含ajax调用的多标签功能。

show.html.erb

<a href="#tabs-2A<%= id %>"> # dynamically generated tabs within loop

$.ajax({
    type: "GET",
    url: "/controller1/method1",
    dataType: "html",
    data: {  },
    success: function (html) {
        $(element).find("#id").append(html);
    }
});

OnClick on任何这些选项卡会触发ajax调用。注意：我上面使用了append。

部分会被追加，类似于实际的

<td><input type="checkbox" data-some_id="<%= @object.id %>", id="dots"/></td>

JS。

$('body').on("click", "#dots", function(){
   $.ajax({
    var some_id = $(".dot-checked").data('some_id');
    type: "GET",
    url: "/controller1/method2",
    dataType: "json",
    .....
   });
});

所以你可以看到这个部分内有ajax调用。

一切正常。

但是，

我遇到多个请求问题（onclick for 复选框），当您多次点击同一个标签页时，或者即使我们点击其他标签页。

这是因为每次为部分页面请求添加脚本。

重复请求数（/ controller1 / method2）等于单击制表符的次数。

我如何克服这个？

如果不清楚，请随时发表评论。

Answer 1

解决此问题的一种方法是防止在AJAX调用进行时单击两次复选框。由于您正在使用复选框，因此通常最好使用change事件处理程序，而不是click。在AJAX调用完成之前，此方法将禁用该复选框。

$("#dots").on("change", function(){
   $(this).prop('disabled', true); // disable on click/change
   $.ajax({
    type: "GET",
    url: "controller/method",
    dataType: "json",
    complete: function() {
        $('#dots').prop('disabled', false); // re-enable after AJAX is complete
     }
   });
});

ajax调用发出多个请求

1 个答案: