javascript – 如何序列化没有jQuery的表单？

参见英文答案 > form serialize javascript (no framework)10个
由于很多原因(首先是学习JavaScript),我需要将一个没有jQuery的表单序列化,并将生成的序列化数据结构发送到具有aax的PHP页面.
序列化数据必须是JSON格式.

我怎样才能做到这一点？

– 编辑 –

这是我的形式如何：http://jsfiddle.net/XGD4X/

解决方法

我正在处理类似的问题,我同意在不使用框架的情况下首先学习如何编程.我正在使用一个数据对象(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));
}

祝你好运.