我在提交事件上使用回调函数来检索formData。它在我的网站上的此测试页面上正常工作。我试图建立一个小提琴来用于另一个问题。我发现相同的代码在小提琴中不起作用。它返回的不是正确的 formData，而是带有array.length == 0的 formData。
该代码使用 jQuery 作为 document.ready 函数。
JavaScript：
01: /* doc.ready w/ traditional callback fn for event listener */
02:
03: $(document).ready( function() {
04: init();
05:
06: }); // end doc.ready
07:
08: function init() {
09: document.addEventListener("submit", processFormData);
10: } // end def fn init
11:
12: functon processFormData(event) {
13: var formData = new FormData();
14: event.preventDefault();
15: formData = $( 'form' ).serializeArray();
16:
17: console.log('formData : ', formData);
18:
19. } // end def fn processFormDat;
在实时表单中输入数据后，formData 返回一个数组，在相关部分中，该数组如下：
3: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
4: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
5: Object {name: "select-yui_3_nnn ... nnn-field", value: "B"}
6: Object {name: "select-yui_3_nnn ... nnn-field", value: "A"}
7: Object {name: "select-yui_3_nnn ... nnn-field", value: "unsure"}
8: Object {name: "select-yui_3_nnn ... nnn-field", value: "C"}
length: 9
(formData.name"yui"属性不是恒定的。它们是在每次页面加载时动态生成的。它们不能用于引用项目。
在小提琴中，控制台是这样的：
formData : Array []
formData.length == 0.
那么，问题是为什么？
HTML：My 网站是使用其"表单块"之一在Squarespace平台上构建的。HTML非常复杂。我不会尝试在这里重现它。
小提琴中的 HTML 很简单。我在这里复制它，这样您就不必点击。
01; <form method="POST">
02: <div>
03: <label>First Name
04: <input type="text" size="25">
05: </label>
06: </div>
07: <div>
08: <label>Last Name
09: <input type="text" size="25">
10: </label>
11: </div>
12: </form>
console.config({
maxEntries: Infinity
});
/* doc.ready w/ traditional callback fn for event listener */
$(document).ready(function() {
init();
}); // end doc.ready
function init() {
document.addEventListener("submit", processFormData);
} // end def fn init
function processFormData(event) {
var formData = new FormData();
event.preventDefault();
formData = $('form').serializeArray();
console.log('formData : ', formData);
} // end def fn processFormData.as-console-wrapper {
max-height: 100% !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="testForm" method="post">
<div>
<label>First Name
<input type="text" name="fname" size="25">
</label>
</div>
<div>
<label>Last Name
<input type="text" name="lname" size="25">
</label>
</div>
<div>
<label>email address
<input type="email" name="email" size="25">
</label>
</div>
<div>
<label>08:30 Keynote Speaker
<select name="select0830">
<option value="">unsure</option>
<option value="attend">attend</option>
<option value="not attend">not attend</option>
</select>
</label>
<label>09:00 Classes
<select name="select0900">
<option value="">unsure</option>
<option value="class room A">room A</option>
<option value="class room B">room B</option>
</select>
</label>
<label>10:30 Classes
<select name="select1030">
<option value="">unsure</option>
<option value="class room A">room A</option>
<option value="class room B">room B</option>
</select>
</label>
</div>
<div>
<input type="submit" value="submit form">
</div>
</form>您的问题在于您对该方法的使用：
$('form').serializeArray();
.serializeArray()将查看您提供给它的表单，并使用表单中存在的每个表单控件的name字段构建对象数组。正如您所说，name字段是动态生成的，只有在生成时才会得到结果。如果从未生成name属性，那么您将永远不会获得数据(因为它们永远不会在您的代码段中生成，因此您将永远不会获得数据)。
因此，为了使.serializeArray正常工作，您需要为表单输入提供name属性。
在此处查看工作示例
另请注意，不需要new FormData()。您正在使用$('form').serializeArray();返回的数组覆盖此数据