jQuery ajax异步提交跨浏览器问题

我使用.ajax（）函数在单击链接时提交表单。在后端，我实际上是将表单中的一些数据保存到数据库中

$("#save_report").click(function()
            {
                $.ajax({
                    url : actionOfForm,
                    type : $('#custom_targeting_param_form').attr("method"),
                    data : $('#custom_targeting_param_form').serialize(),
                    success : function(){
                        alert('Report Saved successfully');
                        $("#showOrExportCustomTargetingReport").val('showReport');  
                    }
                });
                return false;
            });

现在我在firefox和chrome上遇到了一个奇怪的问题，尽管它在IE8中运行良好

在chrome和firefox中，我第一次单击该链接时，成功警报显示一次，下次单击该链接时，警报显示两次，下次显示三次。这真的让我非常烦恼。使用此多个成功警报，相同的数据也会多次保存到数据库中

$("#save_report").click(function()
            {
                $.ajax({
                    url : actionOfForm,
                    type : $('#custom_targeting_param_form').attr("method"),
                    data : $('#custom_targeting_param_form').serialize(),
                    success : function(){
                        alert('Report Saved successfully');
                        $("#showOrExportCustomTargetingReport").val('showReport');  
                    }
                });
                return false;
            });

我不知道这是怎么回事。这似乎完全令人毛骨悚然：哦

在我的html文件中，我有idsave_report的链接，如下所示：

<a href="#">
    Save Report 
<img height="16" width="16" style="vertical-align: bottom;" src="/img/icn_export.gif"    alt="export">

我的customSaveReport（）函数是用script.js编写的，我正在.html文件中链接它

---

这个customSaveReport（）包含我上面给出的jquery.ajax（）调用

在为这个问题进行了几个小时艰苦的研发工作后，我终于找到了一个合乎逻辑且可能适合我的问题的解决方案。希望这也能帮助其他人

实际上，我的问题在于onclick事件与save_report链接的绑定。每次单击我的链接时，我的函数都会被触发，这实际上会将单击事件与链接绑定在一起。同样地，对于随后每次单击我的链接，都会发生多个绑定，这会导致从ajax调用发送多个请求。因此，我所做的是在Ajax调用返回成功时取消绑定事件

$("#preloader").show();
        //$("#preloader").fadeIn("fast");
        $.ajax({
            url : actionOfForm,
            type : $('#custom_targeting_param_form').attr("method"),
            data : $('#custom_targeting_param_form').serialize(),
            cache : false,
            success : function(){
            //  $dialog.dialog("close");
                $("#save_report").unbind();
                $("#preloader").fadeOut('slow');
                alert('Report Saved successfully');
                $("#showOrExportCustomTargetingReport").val('showReport');  
            },
            error : function(error){
                alert(error);
            }
        });
        return false;

我在学习期间还遇到了一个问题：

实际上，我在html中的链接上附加了一个onclick事件。我又打电话来了 $（保存报告）。在my JS中单击（功能）。这实际上是两次绑定click函数。结果，当我使用firefox和chrome进行测试时，一次点击就得到了2个响应，尽管IE8中的一切都很好（！！令人惊讶）

因此，我所做的是删除$（save_report）。单击（函数）包装器，现在我在单击链接时直接调用$（ajax）函数。下面是我的全部功能：

$(document).ready(function(){
    $('#save_report').bind('click',function(){
        customSaveReport('saveReport',0);
        return false;
    });
});

function customSaveReport(reportAction,Offset)
{
    var actionOfForm = $("#custom_targeting_param_form").attr('action');
    actionOfForm = actionOfForm.replace('#export','');
actionOfForm = actionOfForm+'#export';
$("#custom_targeting_param_form").attr('action',actionOfForm);
    try{ 
        //e.preventDefault();
        $("#preloader").show();
        //$("#preloader").fadeIn("fast");
        $.ajax({
            url : actionOfForm,
            type : $('#custom_targeting_param_form').attr("method"),
            data : $('#custom_targeting_param_form').serialize(),
            cache : false,
            success : function(){
            //  $dialog.dialog("close");
                $("#save_report").unbind();
                $("#preloader").fadeOut('slow');
                alert('Report Saved successfully');
                $("#showOrExportCustomTargetingReport").val('showReport');  
            },
            error : function(error){
                alert(error);
            }
        });
        return false;
    }catch(e){ //alert("ERROR OCCURRED :: "+e); 
    }
}

---

这些都是密码吗？听起来您的点击处理程序被分配了多次，因此被调用了多次。