17 Ago 2015

Serializar datos en JSON con jQuery

Serializar datos en JSON con jQuery

jQuery permite serializar los datos capturados en un formulario para poder pasarlos (por lo general) a una petición AJAX que los procese.

Pero, la cadena que entrega está en un formato simplificado de URL, y ya que nosotros somos buenos desarrolladores web, esto es intolerable, por lo que es mejor usar un protocolo JSON para este pase.

Para no tener una función más que haga esta conversión, lo mas elegante es integrarla a la biblioteca de funciones de jQuery.

Así que desde un archivo nuevo que llamaremos 'extras.jq.js' tendremos:

//JQUERY: Agregar parseo de formulario a datos JSON 
(function ($) {
    $.fn.serializeJSON = function () {
        var o = {}
        var a = this.serializeArray()
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]]
                }
                o[this.name].push(this.value || '')
            } else {
                o[this.name] = this.value || ''
            }
        })
        return o
    }
})(jQuery)

Por lo que nuestra nueva función en jQuery será 'serializeJSON', si , en ingles para mantener el estandar de la libreria.

Y la podremos invocar como cualquier otro método de jQuery:

$.ajax({ 
  type: metodo,
  url: url,
  data: $('#formulario').serializeJSON() [...]

Artículos relacionados