AJAX 从 Web 表单提交请求数据字段 "undefined"

Question

我正在设置一个网页，该网页将用户从表单中的回复存储在 google sheets 文档中。提交表单后，会发出 AJAX 请求并更改以填充 google 脚本中的字段。请求中的数据字段在 google sheet 和生成的 curl 响应中都显示为未定义。

我知道连接已成功建立，因为 "undefined" 个值填充了 google sheet 个单元格。

js如下图。

<html>

<head>
  <script src="jquery-3.3.1.min.js"></script>

  <script>
    var script_url = "https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec";

    function insert_value() {
      var id1 = $("#id").val();
      var name = $("#name").val();
      var url = script_url + "?callback=ctrlq&name=" + name + "&id=" + id1 + "&action=insert";
      var request = jQuery.ajax({
        crossDomain: true,
        url: url,
        method: "get",
        dataType: "json"
      });
    }

    function ctrlq(e) {
      alert('Congrats! Registered Successfully')
    }
  </script>
</head>

<body>
  <form autocomplete=off action="javascript:;" id="resetForm" onsubmit="insert_value()">
    ID : <input type="text" class="id" name="id"><br> First name: <input type="text" class="name" name="name"><br>
    <input type="submit" value="Send form data!">
  </form>

</body>

</html>

这是为请求生成的 curl：

"https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec?callback=ctrlq^&name=undefined^&id=undefined^&action=insert" -H "Accept: application/json, text/javascript, /; q=0.01" -H "Origin: null" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" --压缩

我不确定为什么它们是未定义的，因为这些值是由 js 显式传递到 url 中的。

Answer 1

你好，你不能说我的连接成功是因为我得到了未定义的值 > 它是错误的，因为无论如何你都会得到未定义的值。

你在这里错过了什么，是在你的表单更新后发送你的请求，而不是在初始化时（这是你在这里做的）

您必须将您的函数封装在一种 jquery 文档就绪函数中 https://learn.jquery.com/using-jquery-core/document-ready/ 或者简单地确保您的变量在发送之前是最新的 ;)

Answer 2

<html>

<head>
  <script src="jquery-3.3.1.min.js"></script>

  <script>
    var script_url = "https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec";

    function insert_value() {
      var id1 = $("#id").val();
      var name = $("#name").val();
      var url = script_url + "?callback=ctrlq&name=" + name + "&id=" + id1 + "&action=insert";
      var request = jQuery.ajax({
        crossDomain: true,
        url: url,
        method: "get",
        dataType: "json"
      });
    }

    function ctrlq(e) {
      alert('Congrats! Registered Successfully')
    }
  </script>
</head>

<body>
  <form autocomplete=off action="javascript:;" id="resetForm" onsubmit="insert_value()">
    ID : 
    <input type="text" id="id" name="id">
    <br> 
    First name: 
    <input type="text" id="name" name="name">
    <br>
    <input type="submit" value="Send form data!">
  </form>

</body>

</html>

不是为输入元素提供 class 名称，而是提供 Id。 Id 只不过是每个元素的唯一属性。它必须是独一无二的。

此外，我已将 class 属性更改为 id。现在它必须按预期工作。

AJAX 从 Web 表单提交请求数据字段 "undefined"

AJAX request data fields "undefined" from web form submission

html

javascript

jquery

asp.net-ajax