Ajax 调用重复按钮单击

Question

我正在使用 mvc 在 asp.net 中开发一个应用程序。我尝试通过 jQuery ajax 请求将图像的字节发送到控制器，但遇到了问题。

当我将一个字段留空并单击提交按钮时，消息将附加“请输入此字段”。所以，应该停止ajax请求，但是当我填写这个输入字段并单击按钮时，ajax请求被调用了两次，并且图像也被两次保存在数据库中。

我怎样才能停止这种重复？

if (Productname == "") {
    alert("Please Enter Product Name");
    return;
}
else if (Ratei == "") {
    alert("Please Enter Product Price");
    return;
}
else if (URLi == "") {

    alert("Please Enter Ebay Url");
    return;
}
else {
    var postdata = { ProductName: Productname, ModelID: ModelID, Rate: Ratei, Discount: Discounti, Condition: Conditioni, Url: URLi, Desc: Descriptioni, shDesc: shDescriptioni }
    var ProductId = 0;
    $.ajax({

        type: "POST",
        // url: "/EcommerceAdmin/Admin/addProduct",
        url: "/Admin/addProduct",
        data: postdata,
        success: function (data) {
            ProductId = data.id;enter code here
        }
    });
}

Answer 1

您所说的问题是重复提交。有几种方法可以解决这个问题。

最简单的方法是在评估业务规则后尽早disable the button。

更复杂的方法是throttle the submission，以便将多次点击视为一次。

最复杂的方法是使用nonce (one time use code)，服务器可以检查并阻止第二次提交。

当然，您可以使用多种技术来提供用户体验，同时保护后端免受机器人驱动的回放。