$.post() 没有时间运行？答案

【问题标题】：$.post() doesn't have time to run?$.post() 没有时间运行？
【发布时间】：2010-10-06 02:48:19
【问题描述】：

我试图在提交表单之前将数据从表单发送到外部脚本，但我似乎无法让数据到达外部脚本，除非我在表单本身上return false;。

$(document).ready(function () {

  // Handle Form-Submission
  $("#mainForm").submit(function () {

    // Reset Error Array
    errors = new Array();

    /* Validation Code Removed - Not Relevant */        

    // Check if errors exist
    if (errors.length > 0) {
      return false;
    } else {
      $("div.errors").html("");
      $.post("post.php",{
        "First Name": name_first.val(),
        "Last Name": name_last.val(),
        "Home State": home_state.val(),
        "Primary Email": email_primary.val()
      });
    }
    return false; /* Remove this line, and the $.post won't work. */
  });
});

【问题讨论】：

你到底想做什么？等待 $.post 完成，然后提交表单？
我正在考虑，保罗。基本上我想在不破坏应用程序流程的情况下记录数据。如果禁用了 Javascript，我仍然希望表单能够正常工作。但如果启用，我想将数据传递到 PHP 脚本中。
或许我应该将$("#mainForm").submit() 改为$("#submitButton").click() 然后在回调函数中提交表单？

标签： javascript jquery ajax post

【解决方案1】：

我今天遇到了完全相同的问题。正如 Marc 所说，这是因为 ajax 调用是异步的。最简单的解决方法是使其同步。

在像这样的任何 ajax 调用之前使用 .ajaxSetup()：

$.ajaxSetup({async: false});

【讨论】：

行得通！哇。我喜欢 StackOverflow。花 2 小时解决问题，并在此处发布后 10 分钟内得到答案。
小心同步 - 它会阻塞 UI 直到 POST 返回！
当然，它只用于您想要阻止 UI 的场景。安全的方法是让您的点击/提交事件默认返回 true，这样非 Javascript 浏览器仍然可以正常运行。

【解决方案2】：

发送到两个端点

我会尝试这样的事情而不是使用async: true。虽然它明显更复杂，但它不会冻结界面。：

 $(document).ready(function(){           
  // Handle Form-Submission
 $("#mainForm").submit(function(e){  
    e.preventDefault();
    var $form = $(this);

    if($form.data('submitting')) return; // Avoid double submissions
    $(':submit').attr('disabled','disabled'); // Disable the submit button

    // Reset Error Array
    errors = new Array();

    /* Validation Code Removed - Not Relevant */        

    // Check if errors exist
    if (errors.length > 0) {;
      $(':submit').removeAttr('disabled'); // Enable the submit button
      return false;
    } else {
      $("div.errors").html("");
      $form.data('submitting',true); // Flag that a submission has started
      $.post("post.php",{
        "First Name":name_first.val(),
        "Last Name":name_last.val(),
        "Home State":home_state.val(),
        "Primary Email":email_primary.val()},
        function(){
          // remove our special handler and submit normally
          $form.unbind('submit').submit();
        }
      );
    }
  });
});

原答案

看来你的挂断是你想在启用 JavaScript 的情况下使用$.post，但在禁用 JavaScript 的情况下让表单正常运行。

但是，由于 如果您的 JavaScript 被禁用将不会运行，因此您不必担心更改 submit 函数中的行为。

您可以留下您的return false; 声明，或使用

$("#mainForm").submit(function(e){  
  // all your existing code

  e.preventDefault();
}

这将使表单无法正常提交，而是在 JavaScript 启用时使用您的 $.post 方法。如果禁用会正常提交。

preventDefault 优先于return false，如果您希望事件冒泡继续正常进行，但不要继续默认浏览器操作。 return false 相当于调用e.preventDefault(); e.stopPropagation();

【讨论】：