ajax请求后的ajax，以正常方式提交表单答案

【问题标题】：Ajax after ajax request, submit form normal wayajax请求后的ajax，以正常方式提交表单
【发布时间】：2015-05-14 22:35:02
【问题描述】：

我有 ajax 请求：

<script>
        $("#abc_form_submit").click(function(e) {
        e.preventDefault();

        //........
        $.ajax({
               type: "POST",
               url: url,
               dataType: 'json',
               data: $("#abc_form").serialize(), // serializes the form's elements.
               success: function(data)
               {
                    if(data.success == 'false') {
// show errors
                    } else {
                        // SUBMIT NORMAL WAY. $("#abc_from").submit() doesnt work.
                    }
               }
             });

        return false; // avoid to execute the actual submit of the form.
    });
    </script>

还有php

.....
return $this->paypalController(params, etc...) // which should redirect to other page
.....

如果成功，我应该如何发出 ajax 请求，以正常方式提交表单，因为现在如果我重定向（在 PHP）它唯一的返回响应，但我需要这个 ajax 请求将 php 代码作为正常表单提交处理（如果成功)

请不要建议“window.location”。

【问题讨论】：

为什么要提交两次表单？如果您要以“正常方式”提交表单，那么首先不要打扰 AJAX。
当您说$("#abc_from").submit() 不起作用时，有什么不起作用的，因为这就是这样做的方式？你有错误吗？
@David 因为它是模态的，我需要在不重新加载的情况下显示错误，但如果它通过了，那么我需要正常的方式
@EimantasGabrielius：如果它“通过”，那么表单已经已经提交，为什么还要再次提交呢？这种设计毫无意义。通常，当通过 AJAX 提交表单时，成功或失败都会有一些有意义的响应。在失败的情况下，显示错误。（你正在做什么。）在成功的情况下，对成功做出回应。也许对 UI 进行更改，也许将用户发送到另一个页面，等等。听起来你想将用户发送到另一个页面。就这样吧。

标签： javascript php jquery ajax laravel

【解决方案1】：

我会在表单中添加一个类来测试您的 ajax 是否已经发生。如果它只是使用正常的点击功能。

类似：

$('form .submit').click(function(e) {
  if (!$('form').hasClass('validated'))
  {
    e.preventDefault();
    //Your code here
    $.post(url, values, function(data) {
        if (success)
        {
          $('form').addClass('validated');
          $('form .submit').click();
        }
    });
  }
}

【讨论】：

不错，但是如果我更改（例如使用 firebug）class=validated，那么我可以“破解”这个。这意味着我需要在 php 中验证表单 2 次。没有别的办法？
@EimantasGabrielius 这是非常正确的，但任何 javascript 实现都是可能的。无论您的 javascript 做什么，用户都可以破解它。用户可以访问页面上的所有 js、css 和 html。大多数验证和提交都在同一个调用中进行，以防止此类事情发生。如果验证失败，则使用表单值重新加载页面。如果成功则提交。如果您想在不加载页面的情况下进行验证，无论您选择哪种解决方案，您都必须在提交数据时再次验证。用户可以编辑您的 js 以跳过验证。
我已经做了服务器端的验证，我只需要提交相同的表单而不是ajax方式。
@EimantasGabrielius 如果您在验证和提交之间返回页面，则必须再次验证，否则您将遇到巨大的安全漏洞。关于这个话题没有太多可说的了。也许更好地解释您为什么要在 2 个不同的调用而不是一个调用中验证和提交会有所帮助。

【解决方案2】：

为什么不使用在成功的 AJAX 请求后更新的结果变量？

<script>
    $("#abc_form_submit").click(function(e) {
    e.preventDefault();
    // avoid to execute the actual submit of the form if not succeded
    var result = false;
    //........
    $.ajax({
           type: "POST",
           url: url,
           dataType: 'json',
           async: false,
           data: $("#abc_form").serialize(), // serializes the form's elements.
           success: function(data)
           {
                if(data.success == 'false') {
                    // show errors
                } else {
                    // SUBMIT NORMAL WAY. $("#abc_from").submit() doesnt work.
                    result = true;
                }
           }
         });

    return result; 
});
</script>

【讨论】：

我不知道为什么，结果变量没有得到 TRUE。如果我将 console.log("debug") 放到 else{ ... } 语句中，它会打印出来，但 "result" 不会更改为 true...
我的错误。结果不会改变，因为您正在执行异步 AJAX 调用，因此 click 函数在 AJAX 调用完成之前返回...
我能做什么/改变？
您正在尝试异步验证表单...只是将代码更改为同步进行。
它对我说“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。更多帮助 xhr.spec.whatwg.org”并且不起作用。不过，我将此添加到 $("#abc_form").submit() 事件中。点击重要吗？

【解决方案3】：

我之前遇到过这个问题，我需要将表单提交到两个地方，一个用于跟踪，另一个用于实际的表单操作。

只有当您将 form.submit() 放在 setTimeout 后面时，它才能以编程方式提交。 500ms 似乎对我有用。我不确定为什么浏览器在尝试以传统方式提交表单时无法以编程方式提交表单，但这似乎解决了问题。

setTimeout(function(){ $("#abc_from").submit(); }, 500);

要记住的一件事是，一旦提交，页面就这样了，它就消失了。如果您仍然希望页面上正在运行的任何进程都运行，则需要将表单的目标设置为 _blank，以便它将在新选项卡中提交。

【讨论】：