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

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

我该怎么做

--编辑--

---

我的表单是这样的：

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

---

祝您好运。

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 '&'

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

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

---

我还没有看过jQuery的实现，所以不能保证100%的兼容性。

你能发布你正在使用的标记吗？请设置一个示例Fiddle如果您不反对使用json2.js，您可以使用它，或者，获取它并研究它如何序列化，并从该源代码中学习。您是否不愿意使用任何库？更好的学习方法是查看jquery源代码@F.Calderan这是我的代码：因此，基本上，我需要构建一些dataObj数组来存储我的值（如dataObj[0].prod_name和dataObj[0].prod_num），并使用JSON.stringify将整个数组转换为JSON字符串。。我说得对吗？或者我遗漏了什么？据我所知，JSON主要只是对象文字javascript语法，而stringify方法只是去掉了一个对象方法（为了安全），只留下数据。对于一个简单的程序，您可以只声明一个空对象，将数据添加到其中，stringify和post。如果对数据或对象有意义，请使用数组。早餐后，我将调整我的帖子，以显示更通用的解决方案。您还想看看我的makeAjaxPost（）函数吗？谢谢您花时间：D.关于您的makeAjaxPost函数。。好。。我总是很感兴趣。现在我根据你的建议做一些测试。时间花得很好，因为它澄清了我对这个话题的想法。最好看看你自己能走多远。在我整理文档之后，明天我将添加JDK模块的一部分。我再次查看了您的代码，我有一些问题。将表中的每一行视为数据对象，例如{NeX:WIDGET，NUMA：“15”，NUBB：“87”}，将这个对象称为产品，还是有更好的名称？数字字段之间的区别是什么？下一步考虑这些对象的列表，比如{List:AnRayayFuff[[…] }，你怎么命名这个列表？您是否考虑过为每个对象使用单独的标记、创建“产品”的表单（添加到“列表”中）以及显示“列表”的表格？