javascript - 如何在没有 jQuery 的情况下序列化表单？

Question

<分区>

Answer 1

我正在研究类似的问题，我同意在不使用框架的情况下先学习如何编程是值得的。我正在使用数据对象 (BP.reading) 来保存信息，在我的例子中是血压读数。然后 JSON.stringify(dataObj) 为您完成工作。

这是单击“保存”按钮的处理程序，它是 dataObj 上的一个方法。请注意，我使用的是表单而不是表格来输入数据，但同样的想法应该适用。

update: function () {
            var arr = document.getElementById("BP_input_form").firstChild.elements,
                request = JDK.makeAjaxPost();  // simple cross-browser httpxmlrequest with post headings preset

            // gather the data and store in this data obj
            this.name = arr[0].value.trim();
            ...
            this.systolic = arr[3].value;
            this.diastolic = arr[4].value;

            // still testing so just put server message on page
            request.callback = function (text) {
                msgDiv.innerHTML += 'server said ' + text;
            };
            // 
            request.call("BP_update_server.php", JSON.stringify(this));
        }

希望对你有帮助

* 编辑以显示通用版本 *

在我的程序中，我使用对象来发送、接收、显示和输入相同类型的数据，因此我已经准备好对象。为了获得更快的解决方案，您可以只使用一个空对象并将数据添加到其中。如果数据是一组相同类型的数据，则只需使用数组。但是，对于一个对象，您在服务器端有有用的名称。这是一个更通用的版本，未经测试，但通过了 jslint。

function postUsingJSON() {
    // collect elements that hold data on the page, here I have an array
    var elms = document.getElementById('parent_id').elements,
        // create a post request object
        // JDK is a namespace I use for helper function I intend to use in other
        //  programs or that i use over and over
        // makeAjaxPost returns a request object with post header prefilled
        req = JDK.makeAjaxPost(),
        // create object to hold the data, or use one you have already
        dataObj = {},   // empty object or use array dataArray = []
        n = elms.length - 1;     // last field in form

    // next add the data to the object, trim whitespace
    // use meaningful names here to make it easy on the server side
    dataObj.dataFromField0 = elms[0].value.trim();  // dataArray[0] =
    //        ....
    dataObj.dataFromFieldn = elms[n].value;

    // define a callback method on post to use the server response
    req.callback = function (text) {
        // ...
    };

    // JDK.makeAjaxPost.call(ULR, data)
    req.call('handle_post_on_server.php', JSON.stringify(dataObj));
}

祝你好运。