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

Question

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

我该怎么做？

- 编辑 -

这是我的形式看起来像：http://jsfiddle.net/XGD4X/

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)); 
} 

祝你好运。

Answer 2

的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％兼容性保证。