表单提交时进行了多个ajax调用

Question

我有一个HTML表单，jQuery捕获表单提交事件，但是由于某些原因浏览器会向后端发送两次Ajax调用。没有JavaScript错误，一切都按预期工作，包括后端返回预期的JSON。

我找到了其他帖子也有相同的问题，但是没有任何回复能够帮助我。我在下面包含了我的代码。有人有任何建议吗？

HTML：

<form action="/rating/create/<?php echo $jobId ?>" method="post" id="rating-form">
    <input type="hidden" id="Rating_jobId" name="Rating[jobId]" value="<?php echo $jobId ?>" />
    <input id="Rating_quality" type="slider" name="Rating[quality]" value="0" />
    <input id="Rating_service" type="slider" name="Rating[service]" value="0" />
    <input type="submit" name="submit" value="Submit">
</form>

JavaScript / jQuery：

    $('#rating-form').live('submit', function() {

        var action = $(this).attr('action');

        var dataset = {'Rating':{
                        'jobId':$('#Rating_jobId').val(),
                        'quality':$('#Rating_quality').val(),
                        'service':$('#Rating_service').val(),
                        },'ajax':'true'}

        d = new Date;
        dateCache = d.getTime();
        $.ajax({
            type: "POST",
            url: action +"?"+ dateCache,
            data: dataset,
            datatype: "application/json",
            cache: false
        }).done(function( response ) {

            if(response.success == 'true'){

                $('a.rating-'+ response.jobId).parent().remove();
                $.fancybox.close()

            } else {
                alert( response.error );
            }
         });

        return false;
    });

- Dubby

---

FYI：你可以跳过使用dateCache的整个内容，因为POST请求根本不会被缓存。另外，jQuery也可以通过cache: false来实现相同的功能。 - Andreas

你正在使用 Firebug 吗？你看到有两个请求被发送了吗？如果没有，那么问题可能出在后端。 - Wern Ancheta

Answer 1

您可以通过在单击按钮时禁用它，并在完成 Ajax 调用后启用它来避免此问题。

- Raab

---

你的意思是禁用按钮的可点击性吗？该按钮只被点击了一次，但执行了两次。我不确定你的建议是否有帮助。 - Dubby

Answer 2

不要再使用 rating-form').live('submit', function() {}，为什么不直接这样做呢？

$("form").submit(function () {
  $(this).ajaxSubmit();
  return false;
})

并包含jquery.form.js。对于成功回调，请查看链接！

- Sadiksha Gautam