Javascript 使用纯js获取formData有没有更简单的方法？

我的html结构如下，一个嵌套在表单中的表，输入中的一些信息或选择中的选项将通过ajax发送

<form>
<table>
    <tr>
        <td>date</td>
        <td><input class="data" type='text' name="date"></td>
    </tr>
    <tr>
        <td>type</td>
        <td>
        <select id="type" name="type">
            <option value="word">word</option>
            <option value="phase">phrase</option>
            <option value="sentence">sentence</option>
            <option value="grammar">grammar</option>
        </select>
    </td>
    </tr>
    <tr>
        <td>content</td>
        <td><textarea  class="data" name='content' cols="80" rows="8"></textarea></td>
    </tr>
    <tr>
        <td>meaning</td>
        <td><textarea  class="data" name='meaning' cols="80" rows="8"></textarea></td>
    </tr>
    <tr>
        <td>source</td>
        <td><input class="data" type="text" name="source"></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="submit" id="submit"></td>
    </tr>
</table>
</form>

我用下面的代码得到formData，验证了表单中的所有数据都可以得到

var elements = document.getElementsByClassName("data");
var formData = new FormData(); 

for(var i = 0; i < elements.length; i++)
{
    formData.append(elements[i].name, elements[i].value);
}

var mySelect = document.getElementById("type");
var index = mySelect.selectedIndex;
var svalue = mySelect.options[index].value;
var sname = "type";
formDate.append(sname,svalue);

这里的行有点长，我想要更多的小js代码。

---

用纯js而不是jQuery获取formData还有更简单的方法吗

只需将整个表单传递给对象即可

var formData = new FormData( document.querySelector("form") )

---

这应该适用于所有输入元素和选择元素。如果您有多张表格，请按Id获取表格。谢谢。如果有任何错误，请告诉我。用手机打字

var elements = document.getElementsByTagName("form");

var formData = new FormData(); 
var ipts = elements.querySelector('input, select');
for(var ipt of ipts)
{
    formData.append( ipt.name, ipt.value );
}

---

此代码将返回包含表单中所有键和值的对象

var formData = Object.fromEntries(new FormData(document.querySelector('form')).entries());

结果:

---

而不是jQuery——但是这里没有使用jQuery。使用jquery，$'form'。我的意思是一些不能包含任何jquery的post代码。如果您只想创建一个包含整个表单的所有参数的FormData对象，那么您只需将表单元素本身传递给构造函数即可。如果您只需要根据类或其他标准选择表单的特定元素，那么您必须选择这些元素并将它们逐个添加到循环中。请注意，我们使用CSS已有20多年了。现在是停止使用表格进行布局的时候了。请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。

{ key_1: value_1, key_2: value_2, key_3: value_3, ... }