javascript - 表单提交前的 GET 请求-6ren

javascript - 表单提交前的 GET 请求

转载作者：行者123 更新时间：2023-12-01 00:13:43

25

4

我有一个类似于下面的页面。当用户按下表单的提交按钮时，应该对 API 执行 ping 操作，如果 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>

最佳答案

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

在下面的示例中，有一个 success 变量，当调用成功时，该变量设置为 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>

关于javascript - 表单提交前的 GET 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59911890/

25

4

0

文章推荐： javascript - 选择选项值时删除 div

文章推荐： mysql - SQL - 如何从内部语句中选择 TOP 5

文章推荐： jquery - 怎么触发？

文章推荐： python - Spyder IDE 插件安装 (spyder-unittest)

前、后端通用的可视化逻辑编排
前一段时间写过一篇文章《实战，一个高扩展、可视化低代码前端，详实、完整》，得到了很多朋友的关注。其中的逻辑编排部分过于简略，不少朋友希望能写一些关于逻辑编排的内容，本文就详细讲述一下逻辑
java - 前/后增量运算符和数组
我正在尝试以下 Java 片段: int[] testArray={10,20,30,40}; int i= 0; testArray[i++]= testArray[i++]+1; System.o
c++ - 前/后函数调用实现
我想知道我是否可以通过某种方式在 C++ 中进行前/后函数调用。我有一个包含很多函数的包装器类，在每次调用包装器函数后，我应该调用另一个始终相同的函数。所以我不想像这样对每个函数调用 postFun
c++ - 缺少语法错误；前 *
我有一个像这样的头文件: #pragma once #include "gamestate.h" #include "ExitListener.h" class InitialGameState :
c++ - 前/后增量的左值和右值
学习左值和右值。定义是任何可以是“地址”的东西都是左值，否则就是右值。我检查了运算符的优先级，前缀和后缀增量都比“地址”运算符具有更高的优先级。对于下面的两个例子，谁能解释一下为什么第一个“&++
c++ - 前/后插入器就位
在我的学习过程中，我遇到了前后迭代器，我想知道是否有办法让它们就地创建容器元素。从文档来看，容器似乎需要实现 push_back 函数才能与 back_iterator 一起使用。但是有没有一种方法可
Java:前、后缀运算符优先级
我有两个关于 Java 中运算符优先级的类似问题。第一个: int X = 10; System.out.println(X++ * ++X * X++); //it prints 1440 根据
c++ - 前/后增量说明
请放轻松，不要对我开枪，因为我还是新手。当我运行这段代码时，我完全糊涂了，终生无法弄清楚为什么: int y = 9; cout << "++y = " << ++y << "\n--y = " <
c - 前/后增量指针
两种表达方式有区别吗: (*x)++ 和 ++(*x) 我可以看到这两个语句都替换了 *x 中 (*x+1) 的内容。但是它们之间有什么区别吗？最佳答案 (*x)++ 计算为*x的值；作为副作用，*
excel - 前 n 个值的动态可视化
我有一个如下所示的数据集: Date CONSUMER DISCR CONSUMER STAPLES ENERGY FINANCIALS HEALTH CARE
javascript - 如何验证输入的*前*两个字符是字母？
我希望检查名称字段中输入的前两个字符是否为字母 - 除此之外没有什么区别(空格、'、- 等都是公平的游戏)。这是我到目前为止所拥有的，但它不起作用。想法？谢谢! if (document.form01
javascript - 前 3 次执行中的脚本速度较慢
我制作了一个简单的脚本，为像素和所有附近的像素着色为相同的颜色 Click foto
php - 前 30 天通过一个循环
我需要编写一个循环，以下列格式输出从昨天算起的最近 30 天: 2014-02-02 2014-02-03 2014-02-04 ... 2014-03-04 我想我需要像这样使用循环: for ($
java - 前/后递增/递减和运算符顺序混淆
我正在做一些练习，但我对这个感到困惑: public static int f (int x, int y) { int b=y--; while (b>0) { if (x%2!=0
regex - 前 4 个字符的正则表达式
我需要一个 4 个字符的正则表达式。前 3 个字符必须是数字，最后 1 个字符必须是字母或数字。我形成了这个，但它不起作用 ^([0-9]{3}+(([a-zA-Z]*)|([0-9]*)))?$
php - 前 30 天通过一个循环
我需要编写一个循环，以下列格式输出从昨天算起的最近 30 天: 2014-02-02 2014-02-03 2014-02-04 ... 2014-03-04 我想我需要像这样使用循环: for ($
java - 前 1000 个质数之和
我有下面的程序，我试图找到前 1000 个素数的总和。在代码中，解决方案1和2有什么区别？为什么我不应该将 count 变量放在 if 条件之外？如果我把变量放在 if 之外，我显然没有得到我需要的答
javascript - 前 n 个匹配项的正则表达式
这个问题在这里已经有了答案: Replace First N Occurrences in the String (7 个答案) 关闭 4 年前。我有一个如下的字符串 const str = '_
c - 前 6 次迭代后出现段错误
我正在尝试测量以纳秒为单位的平均访问延迟，但在第一次迭代后我收到“段错误(核心转储)”。我错过了什么吗？我是否滥用了指针。这是导致错误的函数: #include #include #include
MySQL 前 6 个月累计总和
我有一个 SQL 问题 (MySQL)。我如何从下表创建一个新表(表名称:“well_master_prod_inj”)。我需要按井名和日期聚合数据。我希望每个井名只有一行数据以及显示以下数据的列:

首页

博学

6Ren·AI

商城

javascript - 表单提交前的 GET 请求