Web表单提交中的AJAX请求数据字段“未定义”
[英]AJAX request data fields “undefined” from web form submission
问题描述
I'm setting up a webpage that will store user responses from a form in a google sheets document. 
我正在设置一个网页，该网页将用户表单中的用户回复存储在Google表格文档中。 Upon form submission, an AJAX request is made and altered as to populate fields in a google script. 提交表单后，会进行AJAX请求并进行更改，以填充Google脚本中的字段。 The data fields in the request show up as undefined in both the google sheet and in curl response generated. 请求中的数据字段在Google表格和卷曲响应中均显示为未定义。
I know that the connection is made successfully because "undefined" values populate the google sheets cells. 我知道连接成功，因为“未定义”值填充了Google表格单元格。
The js is shown below. 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>
Here is the curl generated for the request: 这是为请求生成的卷曲：
" 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" --compressed “ https://script.google.com/macros/s/AKfycbzfVIP99UG7NK9kD94zptKJeEBhP9qWDsuFVfrOAerK6Hg-EUw-/exec?callback=ctrlq ^＆name = undefined ^＆id = undefined ^＆action = insert” -H“ Accept：application / ,, ， / ; 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 “-压缩
I'm not sure why they are undefined as the values are explicitly passed into the url by the js. 我不确定为什么未定义它们，因为这些值已由js显式传递到url中。
2 个解决方案
解决方案1
0 已采纳 2019-04-03 13:29:54
<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>
Instead of giving class names to the input elements, give Id. 不要给输入元素提供类名，而要给Id。 Id is nothing but a unique attribute for each element. id只是每个元素的唯一属性。 It must be unique. 它必须是唯一的。
Also, I have changed the class attribute to id. 另外，我将class属性更改为id。 Now it must work as expected. 现在它必须按预期工作。
解决方案2
-2 2019-04-03 13:27:06
Hello you can't say my connection is successfull because I get undefined values > it's false, as you will get undefined values anyway. 您好，您不能说我的连接成功，因为我得到了不确定的值>它是假的，因为无论如何您都会得到不确定的值。
What you have missed here, is to send your request once your form has been updated, not on initialization (it's what you are doing here) 您在这里错过的是在表单更新后发送请求，而不是在初始化时发送请求（这就是您在这里所做的事情）
You have to encapsulate your function within a kind of jquery document ready function https://learn.jquery.com/using-jquery-core/document-ready/ Or simply make sure your variable are up to date before sending them ;) 您必须将函数封装在一种jquery文档就绪函数https://learn.jquery.com/using-jquery-core/document-ready/中，或者只是在发送变量之前确保变量是最新的；）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.