表单提交前的 GET 请求答案

【问题标题】：GET request before form submission表单提交前的 GET 请求
【发布时间】：2020-01-25 17:51:21
【问题描述】：

我有一个类似于下面的页面。当用户按下表单的提交按钮时，应 ping API，如果 GET 请求不成功，则不应提交表单。但是，我发现 GET 请求总是失败，并且错误消息是空白的。我的猜测是页面在 GET 请求有时间完成之前被重定向。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.11.2.js" integrity="sha256-WMJwNbei5YnfOX5dfgVCS5C4waqvc+/0fV7W2uy3DyU=" crossorigin="anonymous"></script>
</head>
<body>
    <form action="POST_URL" id="primary-form" method="POST">
        <input type="submit" id="submit-button"/>
        <input type="text" name="text-field" id="text-field">
    </form>
    <script>
        $('#primary-form').submit(function(event) {
            $.ajax({
                type:"GET",
                url: // API_URL //,
                success: function(response) {
                    console.log("success");
                    console.log(response);
                },
                error: function(error) {
                    event.preventDefault();
                    console.log("error");
                    console.log(error);
                },
            });
        })
    </script>
</body>
</html>

我可以修改javascript如下，这样GET请求就成功了。但是，我不知道有什么方法可以逆转event.preventDefault()

    <script>
        $('#primary-form').submit(function(event) {
            event.preventDefault();
            $.ajax({
                type:"GET",
                url: // API_URL //,
                success: function(response) {
                    console.log("success");
                    console.log(response);
                    // want to perform default action
                },
                error: function(error) {
                    console.log("error");
                    console.log(error);
                },
            });
        })
    </script>

【问题讨论】：

标签： javascript forms post

【解决方案1】：

其中一个选项是存储 ajax 调用的结果并在成功时重试调用。

在下面的示例中，有一个成功变量，当调用成功时设置为 true，否则设置为 false。

let success = false;
$('#primary-form').submit(function(event) {
  console.log(success);
  if (!success) {
    event.preventDefault();
    $.ajax({
      type: "GET",
      url: "https://httpbin.org/get",
      success: function(response) {
        success = true;
        //submit the form again
        $("#submit-button").click();
      },
      error: function(error) {
        success = false;
        console.log("error");
        console.log(error);
      },
    });
  }
})

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-1.11.2.js" integrity="sha256-WMJwNbei5YnfOX5dfgVCS5C4waqvc+/0fV7W2uy3DyU=" crossorigin="anonymous"></script>
</head>

<body>
  <form action="POST_URL" id="primary-form" method="POST">
    <input type="submit" id="submit-button" />
    <input type="text" name="text-field" id="text-field">
  </form>
</body>

</html>

【讨论】：

【解决方案2】：

你可以解绑，然后像这样手动提交。

success: function(response) {
  ...
  $('#primary-form').off('submit'); // unbind the javascript binding
  event.currentTarget.submit(); // perform drfault functionality
},

不要忘记解除绑定，否则会变成递归调用。

【讨论】：