URL Codifique uma string no jQuery para uma solicitação AJAX

217

Estou implementando a Pesquisa instantânea do Google no meu aplicativo. Eu gostaria de disparar solicitações HTTP à medida que o usuário digita a entrada de texto. O único problema que estou tendo é que, quando o usuário chega a um espaço entre o nome e o sobrenome, o espaço não é codificado como a +, interrompendo a pesquisa. Como posso substituir o espaço por um +, ou apenas com segurança URL, codificar a sequência?

$("#search").keypress(function(){       
    var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
    $("#results").html(ajax_load).load(query);
});
Brian D
fonte
Você pode usar $.param.
jpaugh

Respostas:

490

Tente encodeURIComponent .

Codifica um componente URI (Uniform Resource Identifier) ​​substituindo cada instância de determinados caracteres por uma, duas, três ou quatro seqüências de escape que representam a codificação UTF-8 do caractere (haverá apenas quatro seqüências de escape para caracteres compostos por dois "substitutos " personagens).

Exemplo:

var encoded = encodeURIComponent(str);
Anders Fjeldstad
fonte
2
Isso resolveu meu problema - quando eu passava uma URL como parâmetro para minha solicitação AJAX, a URL estava perdendo tudo após o & para qualquer sequência de consulta nela. Quando adicionei isso, isso resolveu meu problema. Obrigado!
theJerm 18/08/14
21

encodeURIComponent funciona bem para mim. podemos fornecer o URL desta forma na chamada ajax. O código mostrado abaixo:

  $.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
fonte
9

Melhor maneira:

encodeURIComponent escapa todos os caracteres, exceto o seguinte:alphabetic, decimal digits, - _ . ! ~ * ' ( )

Para evitar solicitações inesperadas ao servidor, você deve chamar encodeURIComponent em quaisquer parâmetros inseridos pelo usuário que serão passados ​​como parte de um URI. Por exemplo, um usuário pode digitar "Tomilho e hora = novamente" para um comentário variável. Não usar encodeURIComponent nessa variável dará o comentário = Tomilho% 20 & time = novamente. Observe que o e comercial e o sinal de igual marcam um novo par de chave e valor. Portanto, em vez de ter uma chave de comentário POST igual a "Tomilho e hora = novamente", você tem duas chaves POST, uma igual a "Tomilho" e outra (hora) igual a novamente.

Para application / x-www-form-urlencoded (POST), por http://www.w3.org/TR/html401/interac...m-content-type , os espaços devem ser substituídos por '+', portanto pode-se desejar seguir uma substituição de cododeURIComponent por uma substituição adicional de "% 20" por "+".

Se você deseja ser mais rigoroso ao seguir a RFC 3986 (que reserva!, ', (,) E *), mesmo que esses caracteres não tenham usos formalizados para delimitar URI, o seguinte pode ser usado com segurança:

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}
StackOverFlow
fonte
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 "+".Como se faz isso?
Vince Kronlein
1
mas para que isso seja útil lá precisaria ser um urldecode equivalente
Sr. Heelis
5

Estou usando o MVC3 / EntityFramework como back-end, o front-end consome todos os meus controladores de projeto via jquery, postando diretamente (usando $ .post) não requer a inscrição de dados, quando você passa parâmetros diretamente além do URL codificado. Eu já testei vários caracteres e até enviei um URL (este http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1 ) como parâmetro e tinha nenhum problema, mesmo que o encodeURIComponent funcione bem quando você passar todos os dados no URL (codificado)

URL codificado, ou seja,>

 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;

Caso contrário, não use encodeURIComponent e tente passar parâmetros dentro do método ajax post

 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
fonte
3
Que provavelmente teria sido uma melhor solução no momento :)
Brian D
0

tente este

var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val().replace(/ /g, '+');
gênese
fonte
5
A solução de Anders Fjeldstad é muito melhor. Substituir espaços por sinais de adição pode funcionar, mas se você tiver outros caracteres (com tremas etc.), terá muitos problemas.
Uku Loskit
1
@Uku: O OP queria substituir o espaço em branco por +, então eu lhe dei uma resposta sobre como fazê-lo. encodeURIComponent fornece% 20
genesis
2
Eu acho que o @Uku está certo. Enquanto isso responde à pergunta literal (e definitivamente funciona), acho que a solução da @ Anders é melhor no esquema maior das coisas.
Brian D