Cómo usar jquery para manipular la cadena de consulta

Tengo un menú desplegable de selección con los identificadores asignados a los valores. En el evento onChange quiero redirigir a la misma url pero con 'id = value' agregado a la cadena de consulta.Cómo usar jquery para manipular la cadena de consulta

¿Cómo puedo comprobar que esta opción 'id' no está ya en la cadena de consulta (no quiero valores múltiples) y reemplazar/agregar según sea necesario.

¿Cómo puedo comprobar si '?' ya está en la cadena de consulta y anexar a la url si no es así.

¿Hay alguna manera fácil con jquery para hacer esto?

Debe hacer algo similar bajo el capó para llamadas $().ajax(url, {options}). Esperaba poder hacer $().redirect(url, { id : $(this).val() }) o algo así.

Gracias de antemano.

Nota: Esta página puede o no tener varias opciones de consulta pasadas (que establece valores predeterminados en otras opciones de formulario) por lo que reemplazar toda la cadena de consulta no es una opción.

<html> 
<head><script type="text/javascript" src="/jquery-1.3.2.min.js"></script></head> 
<body> 
    <script> 
    $(function(){                                   
     $('#selector').change(function(){                             
      // problem if 'id' option already exists 
      var url = location.href + '?;id=' + $(this).val();                        
      location.assign(url); 
     });                                    
    });                                     
    </script> 

    <a href="#" onclick="location.assign(location.pathname)">reset</a>                      
    <form>                                      
    <select id='selector' name='id'>                              
     <option value='1'>one</option>                              
     <option value='2'>two</option>                              
     <option value='3'>three</option>                             
    </select>                                    
    </form> 
</body> 
</html>

Fuente

2010-01-12 CoffeeMonster

posible duplicado de [codificación de la cadena de consulta de un objeto Javascript] (http: // stackoverflow. com/questions/1714786/querystring-encoding-of-a-javascript-object) –

Terminé yendo con un partido RegExp para anular las opciones. jQuery.param toma un hash y lo serializa en una query_string pero no proporciona el inverso (dividiendo una query_string).

// put function into jQuery namespace 
jQuery.redirect = function(url, params) { 

    url = url || window.location.href || ''; 
    url = url.match(/\?/) ? url : url + '?'; 

    for (var key in params) { 
     var re = RegExp(';?' + key + '=?[^&;]*', 'g'); 
     url = url.replace(re, ''); 
     url += ';' + key + '=' + params[key]; 
    } 
    // cleanup url 
    url = url.replace(/[;&]$/, ''); 
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';'); 
    // $(location).attr('href', url); 
    window.location.replace(url); 
};

Luego, en el html

$('#selector').change(function(){ 
    $.redirect(location.href, { id : $(this).val() }) 
})

Gracias a todos los que respondieron.

Fuente

2010-01-13 03:04:55 CoffeeMonster

Trate de usar la función de división:

var url = location.href.split('?')[0] + '?;id=' + $(this).val();

split devuelve una lista formada por la cadena dividido por la cadena (como '?'), Con esa cadena eliminado.

Fuente

2010-01-12 23:14:12

Esto funciona como un encanto:

jQuery.redirect = function(url) { 
    window.location.replace(url); 
}; 
$("#selector").change(function() { 
    var href = window.location.href.substring(0, window.location.href.indexOf('?')); 
    $.redirect(href + '?id=' + $(this).val()); 
});

Fuente

2010-01-12 23:14:27

establecer window.location.search actualizará cadena de consulta de la dirección URL (y sobrescribir un valor si existe ya)

$('#selector').change(function(){ 
    window.location.search = "id=" + $(this).val(); 
});

Fuente

2010-01-12 23:18:01

No funciona para mí. – crizCraig

¿Qué navegador? ¿Cómo son tus HTML y JS? –

Lo siento, estaba confundiendo '.search' con un parámetro de búsqueda querystring. Realmente 'búsqueda' significa toda la cadena de consulta en el objeto de ubicación del DOM. – crizCraig

Sospecho que la supuesta solución no funciona con nombres de variables específicos. Especialmente la línea:

RegExp(';?' + key + '=?[^&;]*', 'g')

Si la clave es una secuencia de caracteres presente en otro lugar dentro de la cadena de consulta, que ocurrencia se erróneamente sustituye también (prueba de una letra, por ejemplo 'a'). Esto se debe a que la expresión regular deja abiertos los límites de la cadena (los caracteres ';' y los caracteres finales '=' son ambos opcionales). Quizás la epxression sea algo así como:

RegExp('[;&]' + key + '=?[^&;]*', 'g')

Aunque todavía no lo he probado.

Fuente

2010-02-25 09:34:15

¡Buen hallazgo de errores! Acabo de verificar mi código y estoy pasando 'client_id = 12; project_id = 45; 'etc. pero veo lo fácil que sería romper con' id = ' Creo que voy a ir con algo así como ' RegExp ('[; &]? \ b' ...) ' Voy a probar cuando Ponte a trabajar. Gracias. – CoffeeMonster

Sobre la base de la respuesta de CoffeeMonster:

Hay un problema cuando la ubicación.href contiene una parte hash:

www.example.com#hash se convierte en www.example.com#hash?id=whatever lo que da como resultado ?id=whatever no interpretado por el servidor.

arreglaron mediante la eliminación de la parte hash de la URL: url.split("#")[0];

// put function into jQuery namespace 
jQuery.redirect = function(url, params) { 

    url = url || window.location.href || ''; 
    url = url.split("#")[0]; 
    url = url.match(/\?/) ? url : url + '?'; 

    for (var key in params) { 
     var re = RegExp(';?' + key + '=?[^&;]*', 'g'); 
     url = url.replace(re, ''); 
     url += ';' + key + '=' + params[key]; 
    } 
    // cleanup url 
    url = url.replace(/[;&]$/, ''); 
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';'); 
    // $(location).attr('href', url); 
    window.location.replace(url); 
};

Ahora www.example.com#hash se convierte en www.example.com?id=whatever

Fuente

2012-11-02 11:59:15 Benkinass

Ahora, para obtener puntos de bonificación, vuelva a conectar el hash al final de la url. :-) –

Cómo usar jquery para manipular la cadena de consulta

Respuesta

Cuestiones relacionadas