jquery - Web Api 仅允许提交表单一次

Question

我在我的 MVC 项目中使用 Web api，并且遇到了一个问题，如果用户位于创建页面..填写表单...并点击提交..在处理时间内，用户将可以连续点击提交按钮进行多个创作。

我的目标

仅允许用户提交表单一次。基本上，在用户单击或按键盘上的 Enter 键或用户提交表单后..它应该只允许 1 次。

我研究过 this 。

我该如何实现呢？这是我到目前为止所拥有的:

<input id="Edit-Btn-Submit" type="submit" value="Save" class="btn btn-primary" />

$("form").data("validator").settings.submitHandler =
    function(form) {

        $.ajax({
            method: "PUT",
            url: infoGetUrl + itemId,
            data: $("form").serialize(),
            beforeSend: function() {
                disableSendButton();
            },
            complete: function() {
                enableSendButton();
            },
            success: function() {
                toastr.options = {
                    onHidden: function() {
                        window.location.href = newUrl;
                    },
                    timeOut: 3000
                }
                toastr.success("Equipment successfully edited.");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                var status = capitalizeFirstLetter(textStatus);
                var error = $.parseJSON(jqXHR.responseText);
                //console.log(error);
                var modelState = error.modelState;
                //console.log(error.modelState);
                $.each(modelState,
                    function(key, value) {
                        var id = "";
                        if (key === "$id") {
                            id = "#" +
                                key.replace('$', '').substr(0, 1).toUpperCase() +
                                key.substr(2);
                        } else {
                            id = "#" +
                                key.replace('$', '').substr(0, 1).toUpperCase() +
                                key.substr(1);
                            var status = capitalizeFirstLetter(textStatus);
                            toastr.error(status + " - " + modelState[key]);
                        }
                        var input = $(id);
                        console.log(id); // result is #id
                        if (input) { // if element exists
                            input.addClass('input-validation-error');
                        }
                    });
            }
        });
    }

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function disableSendButton() {
    $('#Edit-Btn-Submit').prop('disabled', true);
}

function enableSendButton() {
    $('#Edit-Btn-Submit').prop('disabled', false);
}
});

感谢任何帮助。

Answer 1

我解决您问题的方法是禁用该按钮，直到请求完成。这可以防止用户发送垃圾邮件。除了滑动按钮之外，您还可以选择执行其他操作，例如隐藏按钮或其他操作。

下面的代码应该在ajax请求开始时禁用该按钮，并在结束后重新启用它(成功或失败，并不重要)。

您可以引用this page有关使用 JQuery Ajax 对象触发/访问的事件和处理程序的更多信息。

$("form").data("validator").settings.submitHandler =
    function(form) {
        $.ajax({
            method: "PUT",
            url: infoGetUrl + itemId,
            data: $("form").serialize(),
            beforeSend: function() {
                disableSendButton();
            },   
            complete: function() {
                enableSendButton();
            },
            success: function() { /* code */ },
            error: function(jqXHR, textStatus, errorThrown) { /* code */}
        });
    };
function disableSendButton()
{
    $('input').prop('disabled', true);
}
function enableSendButton()
{
    $('input').prop('disabled', false);
}