javascript - 来自 Web 表单提交的 AJAX 请求数据字段“未定义”
问题描述
我正在设置一个网页,它将用户来自表单的响应存储在谷歌表格文档中。提交表单后,会发出 AJAX 请求并进行更改以填充 google 脚本中的字段。请求中的数据字段在谷歌表和生成的 curl 响应中都显示为未定义。
我知道连接成功,因为“未定义”值填充了谷歌表格单元格。
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 "接受:应用程序/json,文本/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 中的。
解决方案
<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 只不过是每个元素的唯一属性。它必须是独一无二的。
另外,我已将类属性更改为 id。现在它必须按预期工作。
推荐阅读
- javascript - DataTables+Datepicker 按日期范围过滤表格
- android - 无法在“PATH”中找到“ANDROID_HOME”和“android”命令
- laravel - 使用变量名呈现 js 变量的附加表单构建器 - laravel
- java - 使用 PDFBox 打印 PDF 永远不会完成
- c# - 当一个线程完成任务而另一个线程正在运行时,有没有办法更新 Web 表单 UI
- go - 如何修复 linter 警告“未检查错误返回值”?
- prolog - 析取算子的等价与多条规则的定义
- javabeans - 在 Elementor 中进行实时编辑时禁用整个字符串
- python - 尝试在python中做“1-x+x^2-x^3+x^4-x^5 ...”系列,有人有什么想法吗?
- reactjs - 使用 jest 和 react-testing-library 测试对象属性时出错