分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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 @R_197_8798@ge 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));
}