jquery - 提交表单时进行多次 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;
    });

Answer 1

您可以通过禁用按钮来避免这种情况，当单击并完成 ajax 调用时，启用它。