URL Codieren Sie eine Zeichenfolge in jQuery für eine AJAX-Anforderung


217

Ich implementiere die Sofort-Suche von Google in meiner Anwendung. Ich möchte HTTP-Anforderungen auslösen, während der Benutzer die Texteingabe eingibt. Das einzige Problem, das ich habe, ist, dass wenn der Benutzer zu einem Leerzeichen zwischen Vor- und Nachnamen gelangt, das Leerzeichen nicht als a codiert wird +, wodurch die Suche unterbrochen wird. Wie kann ich entweder das Leerzeichen durch eine +oder nur eine sichere URL-Codierung der Zeichenfolge ersetzen ?

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

Sie können verwenden $.param.
Jpaugh

Antworten:


490

Versuchen Sie encodeURIComponent .

Codiert eine URI-Komponente (Uniform Resource Identifier), indem jede Instanz bestimmter Zeichen durch eine, zwei, drei oder vier Escape-Sequenzen ersetzt wird, die die UTF-8-Codierung des Zeichens darstellen (nur vier Escape-Sequenzen für Zeichen, die aus zwei Ersatzzeichen bestehen) " Zeichen).

Beispiel:

var encoded = encodeURIComponent(str);

2
Dies löste mein Problem - als ich eine URL als Parameter an meine AJAX-Anfrage übergab, verlor die URL alles nach dem & für alle darin enthaltenen Abfragezeichenfolgen. Als ich dies hinzufügte, löste das mein Problem. Vielen Dank!
theJerm

21

encodeURIComponent funktioniert gut für mich. Wir können die URL wie folgt in einem Ajax-Aufruf angeben. Der unten gezeigte Code:

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

Besserer Weg:

encodeURIComponent maskiert alle Zeichen mit Ausnahme der folgenden:alphabetic, decimal digits, - _ . ! ~ * ' ( )

Um unerwartete Anforderungen an den Server zu vermeiden, sollten Sie encodeURIComponent für alle vom Benutzer eingegebenen Parameter aufrufen, die als Teil eines URI übergeben werden. Beispielsweise könnte ein Benutzer "Thymian & Zeit = wieder" für einen variablen Kommentar eingeben. Wenn Sie encodeURIComponent für diese Variable nicht verwenden, erhalten Sie erneut comment = Thyme% 20 & time =. Beachten Sie, dass das kaufmännische Und und das Gleichheitszeichen ein neues Schlüssel- und Wertepaar markieren. Anstatt einen POST-Kommentarschlüssel gleich "Thyme & time = again" zu haben, haben Sie zwei POST-Schlüssel, einen gleich "Thyme" und einen anderen (time) gleich again.

Für die Anwendung / x-www-form-urlencoded (POST) sind Leerzeichen gemäß http://www.w3.org/TR/html401/interac...m-content-type durch '+' zu ersetzen Möglicherweise möchten Sie einem Ersatz von encodeURIComponent mit einem zusätzlichen Ersatz von "% 20" durch "+" folgen.

Wenn Sie sich strenger an RFC 3986 halten möchten (was reserviert !, ', (,) Und *), obwohl diese Zeichen keine formalisierten URI-Begrenzungsverwendungen haben, kann Folgendes sicher verwendet werden:

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 "+".Wie macht man das?
Vince Kronlein

1
aber damit dies nützlich ist, müsste es ein URL-Code-Äquivalent geben
Herr Heelis

5

Ich verwende MVC3 / EntityFramework als Back-End. Das Front-End verbraucht alle meine Projektcontroller über jquery. Für das direkte Posten (mit $ .post) ist keine Datenangabe erforderlich, wenn Sie andere Parameter als die fest codierte URL direkt übergeben. Ich habe bereits mehrere Zeichen getestet und sogar eine URL (diese http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1 ) als Parameter gesendet und hatte Kein Problem, obwohl encodeURIComponent hervorragend funktioniert, wenn Sie alle Daten innerhalb der URL übergeben (fest codiert).

Hardcodierte URL dh>

 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;

Verwenden Sie andernfalls nicht encodeURIComponent und versuchen Sie stattdessen, Parameter innerhalb der Ajax-Post-Methode zu übergeben

 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
Das wäre damals wahrscheinlich eine bessere Lösung gewesen :)
Brian D

0

Probier diese

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

5
Die Lösung von Anders Fjeldstad ist weitaus besser. Das Ersetzen von Leerzeichen durch Pluszeichen kann funktionieren, aber wenn Sie andere Zeichen (mit Umlauten usw.) haben, werden Sie in große Schwierigkeiten geraten.
Uku Loskit

1
@Uku: OP wollte Leerzeichen durch + ersetzen, also gab ich ihm die Antwort, wie es geht. encodeURIComponent gibt ihm% 20
Genesis

2
Ich denke @Uku ist richtig. Dies beantwortet zwar die wörtliche Frage (und es funktioniert definitiv), aber ich denke, @ Anders 'Lösung ist im größeren Schema der Dinge besser.
Brian D
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.