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调用后，启用它。

Answer 2

而不是制作rating-form').live('submit', function() {}，为什么不这样做

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

并加入jquery.form.js。要获得成功回调，请查看链接！

在表单提交上进行多次ajax调用

2 个答案: