如何使用 javascript（不带 jquery）将 HTML 表单数据发送到 JSON？答案

【问题标题】：How do I send HTML form data to JSON using javascript (without jquery)?如何使用 javascript（不带 jquery）将 HTML 表单数据发送到 JSON？
【发布时间】：2020-07-12 08:21:29
【问题描述】：

提交时，我想将表单数据发送到 json。我想使用 json 以便我可以将数据发送到 Python 进行处理。我没有使用 jquery。

我有以下 HTML 代码：

<form id="frm1">
        <label for="first">First name: <input type="text" id="first" name="first"></label><br><br>
        <label for="last">Last name: <input type="text" id="last" name="last"></label><br>
        <input type="submit" value="Submit">
</form>

我尝试使用以下 JS 代码将数据发送到 JSON：

form.addEventListener('submit', sendData)

function sendData(event){

//retreives form input
const first = form.querySelector('input[name="first"]');
const last = form.querySelector('input[name="last"]');

var xhr = new XMLHttpRequest();
var url = "formResults.json";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.first+ ", " + json.last);
    }
};
var data = JSON.stringify({first, last});
xhr.send(data);
}

我在本地服务器上运行代码，但没有看到 json 文件的输出或任何错误代码。

如何将表单数据转换为 json？

新手程序员

【问题讨论】：

你的python服务器打印出什么吗？您需要正确处理后端才能发回响应。
您是否尝试使用客户端 JS 将数据写入 json 文件？如果是，那么它是不可能的。您应该直接将数据发送到 python 后端并让它处理文件操作
我的 json 文件中没有任何内容可供 python 响应

标签： javascript html json xml forms

【解决方案1】：

这确实是一个非常开放的问题。您没有提供有关需要提供数据的模型的详细信息。我假设你需要一个类似于下面的对象。

{
    first: 'John',
    last: 'Smith'   
}

如果是这种情况，您可以使用以下代码。

var serializeForm = function (form) {

    // Setup our serialized data
    var serialized = {};

    // Loop through each field in the form
    for (var i = 0; i < form.elements.length; i++) {

        var field = form.elements[i];

        // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
        if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;

        // If a multi-select, get all selections
        if (field.type === 'select-multiple') {
            for (var n = 0; n < field.options.length; n++) {
                if (!field.options[n].selected) continue;
                serialized[field.name] = field.options[n].value
            }
        }

            // Convert field data to a query string
        else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
            serialized[field.name] = field.value
        }
    }

    return serialized;

};

然后你可以使用你的代码...

form.addEventListener('submit', sendData)

function sendData(event){

    //retreives form input
    const formData = serializeForm(form);

    var xhr = new XMLHttpRequest();
    var url = "YOUR_ENDPOINT_NEEDS_TO_GO_HERE";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var json = JSON.parse(xhr.responseText);
            console.log(json);
        }
    };
    var data = JSON.stringify(formData);
    xhr.send(data);
}

您可以使用链接here 的codepen 看到以上内容。在示例中，对象是立即创建的，因此右键单击预览窗口中的任意位置，查看控制台，您将看到 serializeForm 方法的输出。

归功于： https://gomakethings.com/how-to-serialize-form-data-with-vanilla-js/ 我从那里获得了初始代码并根据您的（假设的）需求对其进行了修改。

【讨论】：