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);
});
Brian D
fuente
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);
Anders Fjeldstad
fuente
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) {
    }
  });
Praveen04
fuente
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");
}
Desbordamiento de pila
fuente
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) {.......});
d1jhoni1b
fuente
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, '+');
génesis
fuente
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