4

我有以下 JavaScript 代码，它遍历页面上的文本字段列表。它将文本字段中的文本作为价格，通过 AJAX GET 将其发送到服务器，并从服务器获取已解析的 double。如果任何返回的价格低于现有价格，则不应提交表单。

问题是表单在所有 AJAX 请求完成之前提交，因为 Ajax 调用的非阻塞即时响应性质。我需要设置一个 wait() 函数（或在所有 Ajax 方法完成时的回调），但不知道如何使用 jQuery 来做到这一点。

有什么建议么？

// .submitForm is a simple button type="button", not type="submit"
$(".submitForm").click(function(e){
   var submittable = validatePrices();
   if (submittable) {
     $("#myForm").submit();
   }
});

function validatePrices() {
    var submittable = true; 

    $(".productPrice").each(function(){
        var $el = $(this);

        $.ajax({
            type: "POST",
            url: "/get_price.jsp", 
            async: false,
            dataType: "html",
            data: "price=" + $el.val(), 
            success: function(data)
            {                  
               var price = new Number(data.split("|")[1]);
               var minPrice = new Number($el.data("min-price")); 
               if (price < minPrice) 
               {
                  $el.addClass("error");
                  $(".dynamicMessage").show().addClass("error").append("<p>ERROR</p>");
                  submittable = false;
               }
            }
        });
        return submittable;
    });
}
4

2 回答 2

4

您已经在使用同步 AJAX（这对您的用户体验来说是一个非常糟糕的主意），所以这不是问题所在。问题是您需要取消“提交”处理程序中的默认操作：

$(".submitForm").click(function(e){
   var submittable = validatePrices();
   e.preventDefault(); // this line
   if (submittable) {
     $("#myForm").submit();
   }
 });

为每个单独的字段使用返回到服务器的同步 HTTP 请求将使您的站点非常缓慢。无论如何，当您提交表单时，您将不得不再次检查服务器上的参数，因此最好先检查并返回错误。

编辑——现在情况更清楚了，我认为继续进行的方法是完全停止执行 AJAX 验证检查。为什么？好吧，即使您执行了这些测试，您仍然需要在实际提交表单时进行基本相同的有效性测试。您不能像在任何其他表单验证方案中那样依赖实际运行的 JavaScript 验证代码。如果您在表单提交时进行验证，它将节省一堆 HTTP 请求，以便同时完成所有操作。

于 2013-03-07T17:18:57.577 回答
1

您没有取消表单提交。您必须严格使用 ajax 回调（如果您想异步使用它们，那会很好）。

$(".submitForm").click(function(e){
   e.preventDefault();
   validatePrices().done(function () { /* ajax success function here */
       if (submittable) {
           $("#myform").trigger('submit');
       }
   }
});

function validatePrices() {
    var checks = [];

    $(".productPrice").each(function(){
        var $el = $(this);
        checks.push($.ajax({
            /* snip */
    });
    return $.when.apply(null, checks);

}
于 2013-03-07T17:21:08.393 回答