如何在没有jQuery的情况下序列化表单？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

form serialize javascript (no framework) 15 answers
表单序列化javascript（无框架）15个答案

For a lot of reasons (first of all: learning javascript), I need to serialize a form without jQuery, and send the resulting serialized data-structure to a php page with ajax. The serialized data must be in JSON format.

由于很多原因（首先是：学习javascript），我需要在没有jQuery的情况下序列化表单，并将生成的序列化数据结构发送到带有ajax的php页面。序列化数据必须采用JSON格式。

How can I do that?

我怎样才能做到这一点？

--EDIT--

- 编辑 -

this is how my form looks like: http://jsfiddle.net/XGD4X/

这就是我的表单的样子：http：//jsfiddle.net/XGD4X/

2 个解决方案

#1

I am working on a similar problem, and I agree that it is worthwhile to learn how to program first without using a framework. I am using a data object (BP.reading) to hold the information, in my case a blood pressure reading. Then the JSON.stringify(dataObj) dose the work for you.

我正在研究类似的问题，我同意在不使用框架的情况下学习如何编程是值得的。我正在使用数据对象（BP.reading）来保存信息，在我的情况下是血压读数。然后JSON.stringify（dataObj）为您服务。

Here is the handler for the 'save' button click, which is a method on the dataObj. Note I am using a form instead of a table to input data, but the same idea should apply.

这是“保存”按钮单击的处理程序，它是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));
        }

I hope this is helpful

我希望这是有帮助的

* edit to show generic version *

*编辑以显示通用版本*

In my program, I am using objects to send, receive, display, and input the same kind of data, so I already have objects ready. For a quicker solution you can just use a empty object and add the data to it. If the data is a set of the same type of data then just use an array. However, with a object you have useful names on the server side. Here is a more generic version untested, but passed jslint.

在我的程序中，我使用对象来发送，接收，显示和输入相同类型的数据，因此我已经准备好了对象。要获得更快的解决方案，您可以使用空对象并将数据添加到其中。如果数据是一组相同类型的数据，那么只需使用数组。但是，使用对象，您可以在服务器端使用有用的名称。这是一个未经测试的更通用的版本，但传递了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));
}

Good Luck.

祝你好运。

#2

CoffeeScript implementation returning a GET query string:

CoffeeScript实现返回GET查询字符串：

serialize = (form) ->
  enabled = [].filter.call form.elements, (node) -> not node.disabled
  pairs = [].map.call enabled, (node) ->
    encoded = [node.name, node.value].map(encodeURIComponent)
    encoded.join '='
  pairs.join '&'

Or if you rather prefer a key-value map:

或者，如果您更喜欢键值映射：

serialize = (form) ->
  data = {}
  for node in form.elements when not node.disabled and node.name
    data[node.name] = node.value
  data

I haven't looked at jQuery's implementation, so no 100% compatibility guaranteed.

我没有看过jQuery的实现，所以没有100％的兼容性保证。

#1