连续的AJAX通话会增加一个额外的连续通话 - php

我有一个非常标准的ajax调用来进行实时更新,但是,说我调用了ajax,一切都很好,但是说我想再次调用它,这一次,我会收到2个调用,如果我再试一次,我将有3个,我可以通过调用和警报以及Chrome的Network DevCon来验证这一点,知道为什么会这样吗?

附注:我正在使用Laravel 5.1

$('button[name=act]').click(function() {
    var icon = $(this).closest('div.thumbnail').find('i');

    $(document).ajaxStart(function() {
        icon.show();
    });

    $("form").submit(function (e) {

        e.preventDefault();

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: "ajax/acttdb",
            data: formData,
            dataType: "json",
            type: "POST",
            cache: false,
            contentType: false,
            processData: false,
            success: function (data, status, jqXhr) {
                $(icon).fadeIn(function() {
                    $(this).removeClass('fa-spinner fa-spin').addClass('fa-check text-success').fadeOut(1000, function() {
                        $(this).removeClass('fa-check text-success').addClass('fa-spinner fa-spin');
                    });
                });
            }/*,
               error: function (jqXhr, textStatus, errorThrown) {
               console.log("Error response:", jqXhr.responseText);
               }*/
        });
    });
});

参考方案

发生这种情况的原因是,每当单击按钮时,您都会重新绑定提交事件函数,这将导致该函数的多个副本。只需将其移出单击即可,如果您想强制单击一次提交,则可以调用不带参数的Submit()函数来触发该事件。

请尝试以下操作:

$(function(){
    $('button[name=act]').click(function(){
        var icon = $(this).closest('div.thumbnail').find('i');

        $(document).ajaxStart(function()
        {
            icon.show();
        });

        $("form").submit(); //This submits the form on click
    });

    //This binds the function, so it should only be called once.
    $("form").submit(function (e)
    {
        e.preventDefault();

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: "ajax/acttdb",
            data: formData,
            dataType: "json",
            type: "POST",
            cache: false,
            contentType: false,
            processData: false,
            success: function (data, status, jqXhr)
            {
                //BLAH
            }
        });
    });
});

我注意到您可能要解决的另外两件事。您想要以某种方式更新图标,然后再加载。您将需要采用其他方法在成功函数中查找图标(可能是查看返回的数据可能会产生一些有用的信息。由于它是json,因此应该易于更新。)

另外,您当前拥有的方式将绑定到页面上的所有表单。如果页面上有多个表单,则可能需要更改选择器以使用ID。

希望这可以帮助!

PHP:将数组值加在一起 - php

我相信这比标题听起来要难一些,但我可能完全错了。我有一个像这样的数组:[["londrina",15],["cascavel",34],["londrina",23],['tiradentes',34],['tiradentes',21]] 我希望能够采用通用…

PHP JQuery复选框 - php

我有以下片段。 var myData = { video: $("input[name='video[]']:checked").serialize(), sinopse: $("#sinopse").val(), dia: $("#dia").val(), quem: $(&#…

PHP strtotime困境 - php

有人可以解释为什么这在我的服务器上输出为true吗?date_default_timezone_set('Europe/Bucharest'); var_dump( strtotime('29.03.2015 03:00', time()) === strtotime('29.03.2015 04:00�…

PHP-全局变量的性能和内存问题 - php

假设情况:我在php中运行一个复杂的站点,并且我使用了很多全局变量。我可以将变量存储在现有的全局范围内,例如$_REQUEST['userInfo'],$_REQUEST['foo']和$_REQUEST['bar']等,然后将许多不同的内容放入请求范围内(这将是适当的用法,因为这些数据指的是要求自…

php-casperjs获取内部文本 - php

我正在为casperjs使用php包装器-https://github.com/alwex/php-casperjs我正在网上自动化一些重复的工作,我需要访问一个项目的innerText,但是我尚不清楚如何从casperjs浏览器访问dom。我认为在js中我会var arr = document.querySelector('label.input…