用户提交弹出窗体时发送多个ajax调用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用户提交弹出窗体时发送多个ajax调用相关的知识,希望对你有一定的参考价值。

在我的应用程序中,有一个jQuery弹出窗口,我在其中列出供应商以及每个供应商前面的复选框。然后,用户可以选中每个供应商的一个复选框,然后按删除按钮删除供应商。但是,一旦用户单击删除按钮,ajax调用将正确发送到服务器端并在服务器端正确删除供应商(已删除的供应商不再显示在列表中)。一旦用户再次执行相同操作,我注意到弹出窗口向服务器端发送两个ajax请求。如果用户第三次点击,弹出窗口会发送三次ajax请求,依此类推。

var ajaxURL = getFormAction('crm.web.SupplierManager', 
'deleteSupplierRequestAjax');
$("#deleteBtnId").click(function( event ) {
    $( "#supplierDeleteConfirmDivId" ).dialog( "open" );
    $( "#supplierPopupCancelBtnId" ).click(function( event ) {
    $( "#supplierDeleteConfirmDivId" ).dialog( "close" );
    event.preventDefault();
});
$( "#supplierPopupOkBtnId" ).click(function( event ) {
    $( "#supplierDeleteConfirmDivId" ).dialog( "close" );
        $("#supplierPopupOkBtnId").mask("Waiting...");
        $.ajax({
            type: 'POST',
            data: $("#formId").serialize(),
            url: ajaxURL,
            success: function (data) {
                $("#supplierPopupOkBtnId").html(data);
                $("#supplierPopupOkBtnId").unmask();
            },
            error: function(jQXHR, textStatus, errorThrown) {
                $("#supplierPopupOkBtnId").unmask();
                handleAjaxError(jQXHR, textStatus, errorThrown);
            }
        });
    });
event.preventDefault();
});

对我来说,它似乎是表单,每次用户单击删除按钮时,渲染都会累积到弹出窗口中。我不确定这是真正的原因。我猜$("#formId").serialize()惹麻烦。谁有不同的想法?

答案

附:

$( "#supplierPopupCancelBtnId" ).click(function( event ){})

每次按钮上都有一个新的监听器,这是累积的。

尝试使用“one”:

$( "#supplierPopupCancelBtnId" ).one( "click", function() {});

来自jquery文档:

“.one()方法与.on()完​​全相同,除了给定元素和事件类型的处理程序在第一次调用后未绑定。”

以上是关于用户提交弹出窗体时发送多个ajax调用的主要内容,如果未能解决你的问题,请参考以下文章

如何在QML文件里,以模态的方式打开别一个QM

使用JQuery制作一个简单的div弹出窗体

html 输入类型提交通常在单击时重新加载页面。此片段使输入不重新加载页面以便进行ajax调用

带有验证和多个表单处理的 Django Ajax 提交

单击提交按钮时触发 Ajax 调用

使用 AJAX 提交时发送电子邮件不起作用