URL Codificar una cadena en jQuery para una solicitud AJAX


217

Estoy implementando la Búsqueda instantánea de Google en mi aplicación. Me gustaría disparar las solicitudes HTTP a medida que el usuario escribe en la entrada de texto. El único problema que tengo es que cuando el usuario llega a un espacio entre el nombre y el apellido, el espacio no se codifica como a +, lo que interrumpe la búsqueda. ¿Cómo puedo reemplazar el espacio con un +, o simplemente URL codificar la cadena de forma segura?

$("#search").keypress(function(){       
    var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
    $("#results").html(ajax_load).load(query);
});

Puedes usar $.param.
— jpaugh

Respuestas:


490

Prueba encodeURIComponent .

Codifica un componente de Identificador Uniforme de Recursos (URI) al reemplazar cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del personaje (solo serán cuatro secuencias de escape para caracteres compuestos de dos "sustitutos" " caracteres).

Ejemplo:

var encoded = encodeURIComponent(str);

2
Esto resolvió mi problema: cuando pasaba una URL como parámetro a mi solicitud AJAX, la URL estaba perdiendo todo después de & para cualquier cadena de consulta en ella. Cuando agregué esto, eso resolvió mi problema. ¡Gracias!
— theJerm

21

encodeURIComponent funciona bien para mí. podemos dar la url como esta en la llamada ajax. El código que se muestra a continuación:

  $.ajax({
    cache: false,
    type: "POST",
    url: "http://atandra.mivamerchantdev.com//mm5/json.mvc?Store_Code=ATA&Function=Module&Module_Code=thub_connector&Module_Function=THUB_Request",
    data: "strChannelName=" + $('#txtupdstorename').val() + "&ServiceUrl=" + encodeURIComponent($('#txtupdserviceurl').val()),
    dataType: "HTML",
    success: function (data) {
    },
    error: function (xhr, ajaxOptions, thrownError) {
    }
  });

9

Mejor manera:

encodeURIComponent escapa a todos los caracteres excepto los siguientes:alphabetic, decimal digits, - _ . ! ~ * ' ( )

Para evitar solicitudes inesperadas al servidor, debe llamar a encodeURIComponent en cualquier parámetro ingresado por el usuario que se pasará como parte de un URI. Por ejemplo, un usuario podría escribir "Tomillo y tiempo = nuevamente" para un comentario variable. No usar encodeURIComponent en esta variable dará comentario = Thyme% 20 & time = nuevamente. Tenga en cuenta que el signo y el signo igual marcan un nuevo par de clave y valor. Entonces, en lugar de tener una clave de comentario POST igual a "Tomillo y tiempo = otra vez", tiene dos claves POST, una igual a "Tomillo" y otra (tiempo) igual a otra vez.

Para la aplicación / x-www-form-urlencoded (POST), según http://www.w3.org/TR/html401/interac...m-content-type , los espacios deben reemplazarse por '+', por lo que uno puede desear seguir un reemplazo encodeURIComponent con un reemplazo adicional de "% 20" con "+".

Si se desea ser más estricto al adherirse a RFC 3986 (que se reserva!, ', (,) Y *), a pesar de que estos caracteres no tienen usos formales de delimitación de URI, se puede usar de manera segura:

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

1
For application/x-www-form-urlencoded (POST), per http://www.w3.org/TR/html401/interac...m-content-type, spaces are to be replaced by '+', so one may wish to follow a encodeURIComponent replacement with an additional replacement of "%20" with "+".¿Cómo se hace esto?
— Vince Kronlein

1
pero para que esto sea útil tendría que haber un equivalente de urldecode
— Mr Heelis

5

Estoy usando MVC3 / EntityFramework como back-end, el front-end consume todos mis controladores de proyecto a través de jquery, publicar directamente (usando $ .post) no requiere la encriptación de datos, cuando pasas parámetros directamente que no sean URL codificados. Ya probé varios caracteres, incluso envié una URL (esta http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1 ) como parámetro y tenía no hay ningún problema a pesar de que encodeURIComponent funciona muy bien cuando pasa todos los datos dentro de la URL (codificado)

URL codificada, es decir>

 var encodedName = encodeURIComponent(name);
 var url = "ControllerName/ActionName/" + encodedName + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;; // + name + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;

De lo contrario, no use encodeURIComponent e intente pasar parámetros dentro del método de publicación ajax

 var url = "ControllerName/ActionName/";   
 $.post(url,
        { name: nameVal, fkKeyword: keyword, description: descriptionVal, linkUrl: linkUrlVal, includeMetrics: includeMetricsVal, FKTypeTask: typeTask, FKProject: project, FKUserCreated: userCreated, FKUserModified: userModified, FKStatus: status, FKParent: parent },
 function (data) {.......});

3
Probablemente habría sido una mejor solución en ese momento :)
— Brian D

0

prueba este

var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val().replace(/ /g, '+');

55
La solución de Anders Fjeldstad es mucho mejor. Reemplazar espacios con signos más puede funcionar, pero si tiene otros caracteres (con diéresis, etc.), tendrá muchos problemas.
— Uku Loskit 01 de

1
@Uku: OP quería reemplazar los espacios en blanco con +, así que le respondí cómo hacerlo. encodeURIComponent le da% 20
— génesis

2
Creo que @Uku tiene razón. Si bien esto responde a la pregunta literal (y definitivamente funciona), creo que la solución de @ Anders es mejor en el esquema más amplio de las cosas.
— Brian D
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.