Ajax数据表单序列化防止双重提交

Ajax data form serialize prevent double submit

本文关键字：提交序列化数据数据表表单 Ajax 更新时间：2023-09-26

如果我快速按下触发点击调用的按钮，我正在构建我的表单以避免双重提交。成功后我尝试禁用该按钮，但它仍然发送了两次。这是我的代码：

<script>
$(document).ready(function () {
    $("button#rezerva").click(function () {
        var chkArray = [];
        $(".table:checked").each(function () {
            chkArray.push($(this).attr("id"));
        });
        var selected;
        selected = chkArray.join(",");
        $.ajax({
            type: "POST",
            url: "http://rezerv.city/engine/app/add_rezervare.php?mese=" + selected,
            data: $("form#formular_rezervare").serialize(),
            success: function (data) {
                switch (data) {
                    case "nume_error":
                        $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow");
                        break;
                    case "tel_error":
                        $(".msg").html("<p>Vă rugăm completați telefonul</p>").fadeIn("slow");
                        break;
                    case "email_error":
                        $(".msg").html("<p>Vă rugăm completați un email valid</p>").fadeIn("slow");
                        break;
                    case "tel_numar":
                        $(".msg").html("<p>Numarul de telefon trebuie sa contina 10 cifre</p>").fadeIn("slow");
                        break;
                    case "adaugat":
                        $('#rezerva").attr('disabled', 'disabled')
                        var ora = document.getElementById("timepicker1").value;
                        var zi_aleasa = document.getElementById("zi").value;
                        var tip = document.getElementById("tipp").value;
                        var id_local = document.getElementById("id_local").value;
                        $("#filtru_zi").load("http://rezerv.city/select_tip_rezervare.php?zi=" + zi_aleasa + "&tip=" + tip + "&id=" + id_local);
                        $(".succes").html("<p class=''text-center''>Ati rezervat masa <b>" + selected + "</b> in data de <b>" + zi_aleasa + "</b> la ora <b>" + ora + "</b></p><p class=''text-center''><button class=''btn btn-default'' type=''button'' id=''inchide''>Închide</button></p>").fadeIn("slow");
                        break;
                    default:
                        alert("A aparut o eroare. Va rugam incercati mai tarziu.");
                }
            },
        });
    });
});
</script>

我建议将处理程序从onclick更改为onsubmit，并使用e.preventDefault.

$("#formid").on('submit', function(e){
    e.preventDefault();
    //the rest of your code
});

我会将事件侦听器绑定到表单的提交事件，而不是按钮的单击。我知道你在问题中没有问过，但绑定到表单的提交事件会给你更好的用户体验，因为你的用户仍然可以在表单中按enter键提交。

现在，对于您的问题，问题似乎在于您对Ajax的使用。即使您的ajax请求尚未返回，表单仍然会提交。你需要做的是：

$(function () {
    $('#myform').submit(function (e) {
          e.preventDefault();
          // continue on with your business logic
    });
});

当然，点击事件的工作方式也是一样的，所以如果你需要绑定到提交按钮的点击事件，你也可以执行以下操作：

$(function () {
    $("button#rezerva").click(function (e) {
        e.preventDefault();
        // continue on with business logic
    });
});

当点击不在后续中的子限额时，必须立即禁用

selected = chkArray.join(",");
 $('#rezerva"]').attr('disabled','disabled')//ADD THIS
 $.ajax({
            type: "POST",
            url: "http://rezerv.city/engine/app/add_rezervare.php?mese="+selected,
            data: $("form#formular_rezervare").serialize(),
            success: function(data){ 
            switch(data) {
                    case "nume_error":
                         $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow");
 $('#rezerva"]').attr('enable','enable')//ADD THIS
                        break;