Vorwort
Zunächst müssen wir wissen, was Suche ist. Die Suche ist eine Eigenschaft von window.location. Zum Beispiel:
Zunächst haben wir hier eine URL, die http://www.a.com/List/2.html?page=2&color=4&size=3#pic ist.
Wenn wir auf diese Adresse zugreifen, öffnen Sie die Konsole, geben Sie die Fenster ein. Die Lokalisierung und wir erhalten das Ergebnis in der folgenden Abbildung
Wie oben erwähnt, möchten wir im obigen Bild ein Teil der Box im obigen Bild sind.
Warum müssen Sie das bedienen?
Wenn ich beispielsweise auf der zweiten Seite zur dritten Seite springen muss, muss ich die obige Seite = 2 auf Seite = 3 aktualisieren und sicherstellen, dass andere Parameter erhalten bleiben.
Oder es gab zunächst kein Suchergebnis (z. B. die erste Seite der allgemeinen Liste, es gab nichts), aber jetzt muss ich Seite = 2 hinzufügen.
Als nächstes muss ich wissen, auf welcher Seite ich mich jetzt befinde, das heißt, ich muss den Wert der Seite erhalten.
Die Suche ist also erforderlich. Jetzt sind wir von vorne und zurück getrennt. Die Suche ist eine sehr wichtige Methode für die Parameterkonfiguration.
Konstruktionsmethode
Erhalten Sie einen Parameterwert, der in der Suche angegeben ist
Nehmen Sie Baidu und wir fanden die folgende Methode:
Funktion getQueryString (name) {var reg = new Regexp ("(^| &)" + name + "= ([^&]*) (& | $)"); var r = window.location.search.substr (1) .Match (reg); Null zurückgeben;}Methodenquelle: Methode zum Abrufen von Adressbalkenparametern mit JS
Vollfunktionsverfahren
Ich wollte ursprünglich eine Implementierungsidee schreiben, aber ich konnte mich für eine Weile nicht daran erinnern, also gab ich sie direkt an die endgültige Methode:
Funktion funcurl (Name, Wert, Typ) {var loca = window.location; var baseUrl = type == undefiniert? loca.origin + loca.PathName + "?" : ""; var query = loca.search.substr (1); // Wenn keine Parameterübertragung vorliegt, enthält der Rückgabewert kein Fragezeichen, wenn (name == undefined) {return query} // Wenn keine Wertübertragung vorhanden ist, geben Sie den Wert des Parameters zurück. +"= ([^&]*) (& | $)")); return val! = null? Unscape (val [2]): null;}; var url; if (query == "") {// Wenn es keinen Suchwert gibt, geben Sie den Urlurl mit dem angeneigten Parameter = Basisurl + Name + "=" + Wert zurück;} else {//, wenn es keinen Suchwert gibt, den entsprechenden Wert {} -Varg arks und deducly und letztendlich URLVAR -{{{{{{} -Scharn. und Deducly und letztendlich und letztendlich URLVAR -ZUSPFLEGEN. query.split ("&"); für (var i = 0; i <arr.Length; i ++) {arr [i] = arr [i] .split ("="); obj [arr [i] [0]] = arr [i] [1];}; obj [name] = value; url = baseurl+baseurl+baseurl+ Json.Stringify (obj) .Replace (/[/"/{/}]/g," "). Ersetzen (//:/g," = "). Ersetzen (//,/g," & ");};Wie man benutzt
Funcurl () erhält den vollständigen Suchwert (ohne Fragenzeichen)
Funcurl (Name) gibt den Wert des Namens in der URL zurück (integrieren Sie den vorherigen Absatz der Methoden anderer Personen)
Funcurl (Name, Wert) Legen Sie den Wert des Namens in der Suche auf den Wert fest und senden Sie die vollständige URL zurück
Rückgabeinhalte wie http://www.a.com/List/2.html?page=2&color=4&size=3#pic
Funcurl (Name, Wert, Typ) Funktionen wie dem dritten Element, aber dies gibt nur die aktualisierte Suchzeichenfolge zurück
Der Typ hier kann ein beliebiges Zeichen sein, z. B. 1;
Beispiel für Inhaltsbeispiele Seite = 2 & color = 4 & size = 3;
Generell verwendet
Zusammenfassung
Ich wollte ursprünglich ein vorgefertigtes Plug-In finden, aber es war entweder zu groß, um sie zu verstehen oder nicht einfach zu bedienen. Natürlich lag es hauptsächlich daran, dass mein Niveau zu schlecht war.
Also habe ich ein Rad gemacht, um damit zu spielen. Obwohl der Code nicht elegant genug ist, erfüllt er meine Bedürfnisse immer noch. Wenn Sie bessere Vorschläge haben, hinterlassen Sie mir eine Nachricht.
Tatsächlich wird es hauptsächlich mit Vue verwendet, aber es gibt hier keinen Vue -Inhalt, so dass es nicht als eine Reihe von Tutorials für Vue angesehen wird.
Das obige ist die vollständige Beschreibung einiger Methoden und Funktionen der Suche in der von dem Editor vorgelegten URL JavaScript -Operation. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!