Web表单提交中的AJAX请求数据字段“未定义”

时间:2019-04-03 13:19:12

标签: javascript jquery html asp.net-ajax

我正在建立一个网页,该网页将用户表单中的用户回复存储在Google表格文档中。提交表单后,会进行AJAX请求并进行更改,以填充Google脚本中的字段。请求中的数据字段在Google表格和卷曲响应中均显示为未定义。

我知道连接成功,因为“未定义”值填充了Google表格单元格。

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>

以下是为请求生成的卷曲:

https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec?callback=ctrlq ^&name = 未定义 ^&id = 未定义 ^&action =插入” -H“接受:应用程序/ json,文本/ javascript,< em> / ; q = 0.01“ -H”来源:null“ -H”用户代理:Mozilla / 5.0(Windows NT 10.0; Win64; x64)AppleWebKit / 537.36(KHTML,例如Gecko)Chrome / 73.0 .3683.86 Safari / 537.36“-压缩

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

2 个答案:

答案 0 :(得分:0)

<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>

给Id而不是给输入元素提供类名。 id只是每个元素的唯一属性。它必须是唯一的。

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

答案 1 :(得分:-2)

您好,您不能说我的连接成功,因为我得到了不确定的值>这是错误的,因为无论如何您都会得到不确定的值。

您在这里错过的是在表单更新后发送请求,而不是在初始化时发送请求(这就是您在这里所做的事情)

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