URL Zakoduj ciąg znaków w jQuery dla żądania AJAX


217

W mojej aplikacji wdrażam wyszukiwanie błyskawiczne Google. Chciałbym uruchomić żądania HTTP, gdy użytkownik wpisze tekst. Jedyny problem, jaki mam, polega na tym, że gdy użytkownik przechodzi do spacji między imionami i nazwiskami, spacja nie jest kodowana jako a +, co przerywa wyszukiwanie. Jak mogę zamienić spację na +, lub po prostu bezpiecznie URL Zakodować ciąg?

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

Możesz użyć $.param.
jpaugh

Odpowiedzi:


490

Spróbuj encodeURIComponent .

Koduje składnik Uniform Resource Identifier (URI), zastępując każdą instancję niektórych znaków jedną, dwiema, trzema lub czterema sekwencjami ucieczki reprezentującymi kodowanie UTF-8 znaku (będą to tylko cztery sekwencje specjalne dla znaków złożonych z dwóch „surogatów” " postacie).

Przykład:

var encoded = encodeURIComponent(str);

2
To rozwiązało mój problem - kiedy przekazałem adres URL jako parametr do mojego żądania AJAX, adres URL tracił wszystko po ciągach zapytania & w nim zawartych. Kiedy to dodałem, to rozwiązało mój problem. Dzięki!
2014

21

encodeURIComponent działa dla mnie dobrze. możemy podać taki adres URL w wywołaniu ajax. Kod pokazany poniżej:

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

Lepszy sposób:

encodeURIComponent unika wszystkich znaków oprócz następujących:alphabetic, decimal digits, - _ . ! ~ * ' ( )

Aby uniknąć nieoczekiwanych żądań do serwera, powinieneś wywołać encodeURIComponent dla wszystkich parametrów wprowadzonych przez użytkownika, które będą przekazywane jako część identyfikatora URI. Na przykład użytkownik może wpisać „Tymianek i czas = ponownie” dla komentarza zmiennej. Nieużywanie encodeURIComponent w tej zmiennej da komentarz = Tymianek% 20 i czas = ponownie. Zauważ, że znak ampersand i znak równości oznaczają nową parę klucz i wartość. Zatem zamiast klucza komentarza POST równego „Tymianek i czas = ponownie”, masz dwa klucze POST, jeden równy „Tymianek”, a drugi (czas) równy ponownie.

W przypadku application / x-www-form-urlencoded (POST), według http://www.w3.org/TR/html401/interac...m-content-type , spacje należy zastąpić „+”, więc można wykonać zamianę kodowaniaURIComponent z dodatkową zamianą „% 20” na „+”.

Jeśli ktoś chce bardziej rygorystycznie przestrzegać RFC 3986 (który zastrzega!, ', (,) I *), mimo że znaki te nie mają sformalizowanych zastosowań URI, można bezpiecznie użyć następujących opcji:

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 "+".Jak to zrobić?
Vince Kronlein

1
ale aby było to przydatne, musiałby istnieć odpowiednik kodu urld
Pan Heelis,

5

Używam MVC3 / EntityFramework jako back-end, front-end zużywa wszystkie moje kontrolery projektu za pomocą jquery, wysyłanie bezpośrednio (za pomocą $ .post) nie wymaga enskrypcji danych, gdy przekazujesz parametry bezpośrednio inne niż adres URL zakodowany na stałe. Testowałem już kilka znaków, nawet wysłałem URL (ten http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1 ) jako parametr i miałem żaden problem, mimo że encodeURIComponent działa świetnie, gdy przekazujesz wszystkie dane w adresie URL (na stałe)

Zakodowany adres URL, tj.>

 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;

W przeciwnym razie nie używaj encodeURIComponent i zamiast tego spróbuj przekazać parametry w metodzie 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) {.......});

3
To byłoby prawdopodobnie lepsze rozwiązanie w tym czasie :)
Brian D

0

Spróbuj tego

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

5
Rozwiązanie Andersa Fjeldstad jest znacznie lepsze. Zastąpienie spacjami znakami plus może działać, ale jeśli masz inne postacie (z umlautami itp.), Będziesz miał mnóstwo kłopotów.
Uku Loskit

1
@Uku: OP chciał zastąpić białe znaki +, więc dałem mu odpowiedź, jak to zrobić. encodeURIComponent daje mu% 20
geneza

2
Myślę, że @Uku ma rację. Chociaż to odpowiada na dosłowne pytanie (i na pewno działa), myślę, że rozwiązanie @ Andersa jest lepsze w większym schemacie rzeczy.
Brian D
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.