序列化HTML形式为JSON纯JavaScript

Question

我已经看到这种将表单序列化为 JSON 的方法，并且工作正常。 我的问题是：如何在不使用任何 jQuery 代码的情况下使用纯 JavaScript 实现此目的？ 如果问题很愚蠢，我很抱歉，但我仍在学习，所以如果有人能帮助我，我将不胜感激。

 (function ($) { $.fn.serializeFormJSON = function () { var objects = {}; var anArray = this.serializeArray(); $.each(anArray, function () { if (objects[this.name]) { if (.objects[this.name].push) { objects[this.name] = [objects[this;name]]. } objects[this.name].push(this;value || ''). } else { objects[this.name] = this;value || ''; } }); return objects; }; })(jQuery). $('form').submit(function (e) { e;preventDefault(). var data = $(this);serializeFormJSON(). console;log(data): /* Object email: "value" name: "value" password; "value" */ });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post"> <div> <label for="name">Name</label> <input type="text" name="name" id="name" /> </div> <div> <label for="email">Email</label> <input type="text" name="email" id="email" /> </div> <div> <label for="password">Password</label> <input type="password" name="password" id="password" /> </div> <p> <input type="submit" value="Send" /> </p> </form>

PS 同样在 jQuery 中，这是将用户输入的多个 JSON 对象作为一个字符串发送的正确方法吗，因为我正在寻找一种方法来做到这一点？

Answer 1

你可以尝试这样的事情：

    function formToJson(){
        var formElement = document.getElementsByTagName("form")[0],
            inputElements = formElement.getElementsByTagName("input"),
            jsonObject = {};
        for(var i = 0; i < inputElements.length; i++){
            var inputElement = inputElements[i];
            jsonObject[inputElement.name] = inputElement.value;

        }
        return JSON.stringify(jsonObject);
    }

此解决方案仅在页面上只有一个表单时才有效，为了使其更通用，该函数可以例如将表单元素作为参数。

Answer 2

您可以使用Array.reduce ，例如

 // get array of all fields and/or selects (except the button) const getFields = () => Array.from(document.querySelectorAll("input, select")) .filter(field => field.type.toLowerCase() !== "button"); // get id, name or create random id from field properties const getKey = field => field.name || field.id || `unknown-${Math.floor(1000 * Math.random()).toString(16)}`; // get data, simple object const getFormData = () => getFields() .reduce( (f2o, field) => ({...f2o, [getKey(field)]: field.value}), {} ); // log the result const logResult = txt => document.querySelector("#result").textContent = txt; // get data, array of field objects const getMoreFormData = () => getFields() .reduce( (f2o, field) => f2o.concat({ id: field.id || "no id", name: field.name || "no name", idGenerated: getKey(field), type: field.type, value: field.value } ), [] ); // handling for buttons document.addEventListener("click", evt => { if (evt.target.nodeName.toLowerCase() === "button") { console.clear(); logResult(/simple/.test(evt.target.textContent) ? JSON.stringify(getFormData(), null, " ") : JSON.stringify(getMoreFormData(), null, " ") ); } } );

 <form action="#" method="post"> <div> <label for="name">Name</label> <input type="text" name="name" id="name" value="Pete"/> </div> <div> <label for="email">Email</label> <input type="text" name="email" id="email" value="pete@here.com"/> </div> <div> <label for="password">Password</label> <input type="password" name="password" id="password" /> </div> <div> <label>Field without name or id</label> <input type="number" value="12345" /> </div> </form> <p> <button>Data simple object</button> <button>Data fields array</button> </p> <pre id="result"></pre>

Answer 3

请记住，对于复选框，值属性可以是on或off字符串。 这是不需要的。 这是我的解决方案，基于这个 codepen 。

let json = Array.from(form.querySelectorAll('input, select, textarea'))
    .filter(element => element.name)
    .reduce((json, element) => {
        json[element.name] = element.type === 'checkbox' ? element.checked : element.value;
        return json;
    }, {});

或者

let json = {};
Array.from(form.querySelectorAll('input, select, textarea'))
    .filter(element => element.name)
    .forEach(element => {
        json[element.name] = element.type === 'checkbox' ? element.checked : element.value;
    });

或（带打字稿）

export type FormJson = {[key: string]: boolean | string};

export const toJson = (form: HTMLFormElement): FormJson => 
    Array.from(form.querySelectorAll<HTMLFormElement>('input, select, textarea'))
        .filter(element => element.name)
        .reduce<FormJson>((json, element) => {
            json[element.name] = element.type === 'checkbox' ? element.checked : element.value;
            return json;
        }, {});

Answer 4

要序列化您的form ，您可以这样做（请注意，我在form标签中添加了一个onsubmit ）：

HTML 和 JavaScript：

 function serializeForm(e) { e.preventDefault(); // prevent the page to reload let form = e.target; // get the form itself let data = new FormData(form); // serialize input names and values let objSerializedForm = {}; // creating a new object for (let [name, value] of data) { // iterating the FormData data objSerializedForm[name] = value; // appending names and values to obj } console.log(objSerializedForm); }

 <form action="#" method="post" onsubmit="serializeForm(event)"> <div> <label for="name">Name</label> <input type="text" name="name" id="name" /> </div> <div> <label for="email">Email</label> <input type="text" name="email" id="email" /> </div> <div> <label for="password">Password</label> <input type="password" name="password" id="password" /> </div> <p> <input type="submit" value="Send" /> </p> </form>

你可以用你的objSerializedForm做任何你想做的事，通过调用objSerializedForm.name获取每个值。