Question

我注意到我的ajax表单最多可以提交两次，这意味着一旦我提交并检索数据并希望再次提交表单以优化搜索（它是搜索表单），它就可以完成。两次以上无法提交，提交按钮也会被禁用。是否有多次限制提交ajax表单？

我的表单提交由

提出

$("form").on("submit", function () ...

AJAX：

var getData;

$("form").on("submit", function () {
    //$(this).find(':submit').attr('disabled','disabled');
    var data = {
        "action": "test"
    };

    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "ajax2.php",
        data: data,

        success: function (data) {

            getData=data;
            //$("#main_content").slideUp("normal",function(){   
            $(".the-return").show();



           if(data!=""){
               console.log(data.length);
            for (i = 0; i < data.length; i++) {
                //availability
            if(data[i].weekM==0)
            {
                var avail="Not available";
            }
            else
            {
                avail="Available";
            }

            if(data[i].endA==0)
            {
                var avail2="Not available";
            }
            else
            {
                avail2="Available";
            }

            if(data[i].weekE==0)
            {
                var avail3="Not available";
            }
            else
            {
                avail3="Available";
            }



$(".the-inner-return").append("<div class='inside_return'><section class='row'><div class='small-10 medium-10 large-8 small-centered medium-centered large-centered columns d_result'><div class='text-center post_id'>" + data[i].id +"</div><div class='small-12 medium-12 large-9 columns subject'>"+ data[i].subject+" Instructor</div><div class='small-12 meidum-12 large-3 columns rate'>" + data[i].rate +"</div><span class='hourly'>hourly</span><div class='small-12 medium-12 large-12 text-center name'>" + data[i].name +"</div><div class='small-12 medium-12 large-4 columns plusneg'><img src='img/happy.png'>" + data[i].plus+"<br/><img src='img/sad.png'>"+ data[i].neg+"</div><div class='small-12 medium-12 large-4 columns gender text-center'>Male<br/>Availabiliy:<br/>Mornings:<span class='avail'>" + avail+"</span><br/>Afternoons:<br/><span class='avail'>"+ avail2+"</span><br/>Evening:<span class='avail'>"+ avail3+"</span></div><div class='small-12 medium-12 large-4 columns score text-center'><h6>Reputation score</h6>"+ data[i].reputation+"</div><div class='row'><div class='small-12 medium-12 large-5 columns shortlist text-center'>Add to Shorlist</div><div class='small-12 medium-12 large-5 columns gettutor text-center'>Get Tutor</div></div><div class='small-12 medium-12 large-12 columns text-center date'>Posted on:<span class='elec'>"+ data[i].postDate+"</span></div></div></section></div>");

            //alert(data[i].name) 
            }
           }else{
               $(".the-return").hide();
               $("#the-return-fail").show();
           }

            //});//closes #main_content
        }


    });
    return false;


});

Answer 1

没有可以阻止多个ajax提交的计数器。但是，如果您在上一个请求完成之前尝试提交，那么如果使用全局变量，则可能会遇到问题。

Here's an example执行多次提交。

<form action="" method="post">
    <input name="foo" id="foo" type="text" />
    <button>Send It</button>
</form>

<div id="output">
</div>

此处的data格式化为JSFiddle的echo服务

$("form").on("submit", function(event) {
    event.preventDefault();

    // prevent next submission before request is complete
    $("button").prop("disabled", true);

    var dt = new Date();
    $.ajax({
        url: "/echo/json/",
        method: "post",
        data: {
            json: JSON.stringify({
                date: new Date(),
                foo: $("#foo").val()
            }),
            delay: 3
        },
        success: function(result) {
            $("#output").append($("<div>").html(result.foo + " " + result.date));
            $("button").prop("disabled", false);
        }
    });
});

如何在每次点击时提交ajax表单？

1 个答案: