cómo serializar un formulario sin jQuery?

Question

Por muchas razones (antes que nada: aprender javascript), necesito serializar un formulario sin jQuery, y enviar la estructura de datos serializada resultante a una página php con ajax. Los datos serializados deben estar en formato JSON.

¿Cómo puedo hacer eso?

--EDIT--

Así es como mi forma se parece a: http://jsfiddle.net/XGD4X/

Answer 1

estoy trabajando en un problema similar, y estoy de acuerdo que vale la pena aprender a programar primero sin utilizar una marco de referencia. Estoy usando un objeto de datos (BP.reading) para guardar la información, en mi caso una lectura de la presión arterial. Entonces el JSON.stringify (dataObj) dosifica el trabajo para usted.

Aquí está el controlador para el clic del botón 'guardar', que es un método en el dataObj. Tenga en cuenta que estoy usando un formulario en lugar de una tabla para ingresar datos, pero se debe aplicar la misma idea.

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

espero que esto sea útil

* EDITAR para mostrar la versión genérica *

En mi programa, yo estoy usando objetos para enviar, recibir, visualizar, y la entrada de la misma clase de datos, entonces ya tengo los objetos listos. Para una solución más rápida, puede usar un objeto vacío y agregarle los datos. Si los datos son un conjunto del mismo tipo de datos, simplemente use una matriz. Sin embargo, con un objeto tiene nombres útiles en el lado del servidor. Aquí hay una versión más genérica no probada, pero aprobada 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)); 
} 

Buena suerte.

Answer 2

aplicación CoffeeScript devolver una cadena de consulta 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 '&' 

O si más bien prefiere un mapa clave-valor:

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

no he mirado aplicación de jQuery, por lo que no 100% compatibilidad garantizada