Armar query string usando jQuery

 En un post anterior publique como llamar un Webservice usando jQuery y para ello los datos los pasábamos usando el método POST por lo tanto es necesario armar el query string (name1=value1&name2=value2...) en la llamada al WS.



Existen varios plugin que nos facilitan algunas tareas o que los podemos usar para aprender cómo hacer algunas cosas usando jQuery (este es mi caso), y uno de ellos es Plugin Form (http://www.malsup.com/jquery/form/) que incorpora funciones para manejo de formularios y entre las funciones es la serialización de los campos que en definitiva es una función que recorre los objetos del formularios (text, select, check) y arma el query string, lo he probado sobre objetos .Net y funciona súper bien.



Si no quieres incorporar todo el código de la libreria que lo puedes bajar desde el enlace anterior, puedes utilizar el código que está a continuación que es una parte del plugin y te permite serializar una parte del formulario



// Plugin FORM
(function($) {
    $.fn.fieldSerialize = function(successful) {
        var a = [];
        this.each(function() {
            var n = this.name;
            if (!n) return;
            var v = $.fieldValue(this, successful);
            if (v && v.constructor == Array) {
                for (var i=0,max=v.length; i < max; i++)
                    a.push({name: n, value: v[i]});
            }
            else if (v !== null && typeof v != 'undefined')
                a.push({name: this.name, value: v});
        });
        //hand off to jQuery.param for proper encoding
        return $.param(a);
    };
   
    $.fn.fieldValue = function(successful) {
    for (var val=[], i=0, max=this.length; i < max; i++) {
        var el = this[i];
        var v = $.fieldValue(el, successful);
        if (v === null || typeof v == 'undefined' || (v.constructor == Array && !v.length))
            continue;
        v.constructor == Array ? $.merge(val, v) : val.push(v);
    }
    return val;
    };
   
    $.fieldValue = function(el, successful) {
    var n = el.name, t = el.type, tag = el.tagName.toLowerCase();
    if (typeof successful == 'undefined') successful = true;



    if (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||
        (t == 'checkbox' || t == 'radio') && !el.checked ||
        (t == 'submit' || t == 'image') && el.form && el.form.clk != el ||
        tag == 'select' && el.selectedIndex == -1))
            return null;



    if (tag == 'select') {
        var index = el.selectedIndex;
        if (index < 0) return null;
        var a = [], ops = el.options;
        var one = (t == 'select-one');
        var max = (one ? index+1 : ops.length);
        for(var i=(one ? index : 0); i < max; i++) {
            var op = ops[i];
            if (op.selected) {
                // extra pain for IE...
                var v = $.browser.msie && !(op.attributes['value'].specified) ? op.text : op.value;
                if (one) return v;
                a.push(v);
            }
        }
        return a;
    }
    return el.value;
    };
})(jQuery);

No hay comentarios: