Question

我使用.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中，我第一次单击该链接时，成功警报会显示一次，下次单击该链接时，警报会显示两次，下次显示三次。这真是困扰我，就像地狱一样。通过此多次成功警报，相同的数据也会多次保存到数据库中。

我不知道发生了什么事。这似乎完全是怪异的：O

在我的html文件中，我的ID为 save_report 的链接如下：

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

在头部，我包括以下jquery函数：

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

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

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

Answer 1

在这个问题上经过一段时间的研究和研究后，我终于找到了一个合乎逻辑且可能适合我的问题的解决方案。希望这也有助于其他人。

实际上，我的问题在于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 事件。我再次打电话我的JS中的 $（save_report）.click（function）。这实际上是两次绑定点击功能。因此，当我使用firefox和chrome进行测试时，我在单击时获得了2个响应，尽管IE8中的一切都运行良好（!!令人惊讶）。

所以我所做的就是删除了 $（save_report）.click（function）包装器，现在我点击了 $。（ajax）函数链接。这是我的全部功能：

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); 
    }
}

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

1 个答案: