Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten

Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten

In Projekten kommt es häufig vor, dass eine Liste vorliegt, z. B. eine Fallliste. Klicken Sie auf ein Element in der Liste, um zur Detailseite zu springen. Die Details werden basierend auf dem angeklickten Datensatz generiert. Da Fälle und spezifische Detailseiten später von Benutzern hinzugefügt werden, ist es uns unmöglich, beim Schreiben erschöpfend zu sein. Daher müssen wir beim Springen zur Seite einen Parameter übergeben, damit wir über diesen Parameter eine Datenanforderung stellen und dann die Seite entsprechend den vom Hintergrund zurückgegebenen Daten generieren können. Deshalb wird ein Sprung über die Beschriftung A definitiv nicht funktionieren.
Wir schreiben häufig Formulare. Beim Absenden können wir Parameter übergeben. Wenn wir das Formular verwenden und es ausblenden, sollte der Effekt erzielt werden.

Darüber hinaus können window.location.href und window.open denselben Effekt erzielen.

1. Parameter über das Formular übergeben

<html lang="de">
    <Kopf>
    <!--Website-Kodierungsformat, internationale UTF-8-Kodierung, chinesische GBK- oder gb2312-Kodierung-->
        <meta http-equiv="Inhaltstyp" Inhalt="text/html;charset=utf-8" />
        <meta name="Schlüsselwörter" content="Schlüsselwort 1, Schlüsselwort 2">
        <meta name="Beschreibung" content="Website-Beschreibung">
        <meta name="Autor" content="Yvette Lau">
        <title>Dokument</title>
        <!--Einführung in CSS-JS-Dateien-->
        <!-- <link rel="Verknüpfungssymbol" href="images/favicon.ico"> -->
        <link rel="stylesheet" href=""/>
        <Skripttyp = "Text/Javascript" src = "jquery-1.11.2.min.js"></Skript> 
    </Kopf>
    <Text>      
        <Formularname = "frm" Methode = "abrufen" Aktion = "empfangen.html" bei Übermittlung = "Rückgabe foo()" Stil = "Position:relativ;">
            <Eingabetyp="versteckt" Name="versteckt" Wert = "" Index = "Zitrone"> 
            <img Klasse = "mehr" src = "main_jpg10.png" />
            <Eingabetyp = "Senden" Stil = "Position:absolut;links:10px;oben:0px;Breite:120px;Höhe:40px;Deckkraft:0;Cursor:Zeiger;"/>
        </form>     
        <Formularname = "frm" Methode = "abrufen" Aktion = "empfangen.html" bei Übermittlung = "Rückgabe foo()" Stil = "Position:relativ;">
            <Eingabetyp="versteckt" Name="versteckt" Wert = "" Index = "aaa"> 
            <img Klasse = "mehr" src = "main_jpg10.png" />
            <Eingabetyp = "Senden" Stil = "Position:absolut;links:10px;oben:0px;Breite:120px;Höhe:40px;Deckkraft:0;Cursor:Zeiger;"/>
        </form>
        <Formularname = "frm" Methode = "abrufen" Aktion = "empfangen.html" bei Übermittlung = "Rückgabe foo()" Stil = "Position:relativ;">
            <Eingabetyp="versteckt" Name="versteckt" Wert = "" Index = "bbb"> 
            <img Klasse = "mehr" src = "main_jpg10.png" />
            <Eingabetyp = "Senden" Stil = "Position:absolut;links:10px;oben:0px;Breite:120px;Höhe:40px;Deckkraft:0;Cursor:Zeiger;"/>
        </form>
    </body>
</html>
<Skript>
    Funktion foo(){
        var frm = window.event.srcElement;
        frm.hid.value = $(frm.hid).attr("index"); 
        gibt true zurück;
    }
</Skript>

Wenn Sie auf das Bild klicken, werden Sie auf die Seite „receive.html“ weitergeleitet. Die URL der Seite wird:

Die Zeichenfolge, die wir übergeben möchten, wurde übergeben.

Dann teilen Sie die aktuelle URL in Zeichenfolgen auf

window.location.href.split("=")[1]//Holen Sie sich Zitrone

Nachdem wir die zu übergebenden Parameter erhalten haben, können wir auf dieser Grundlage mit dem nächsten Schritt fortfahren.

Zusätzlich zur oben beschriebenen Methode zum Abrufen der von der URL übergebenen Parameter durch Zeichenfolgensegmentierung können wir sie auch durch reguläre Übereinstimmung und die Methode window.location.search abrufen.

2. Über window.location.href

Wenn wir beispielsweise auf eine Liste klicken, müssen wir eine Zeichenfolge an die Seite detail.html übergeben. Anschließend lädt die Seite detail.html den Inhalt der Seite basierend auf dem übergebenen Wert über Ajax-Interaktionsdaten.

var index = "Zitrone"; var url = "receive.html?index="+index; $("#mehr").klicken(function(){ window.location.href = url; });

Die aktuelle Seite wird durch die Seite recieve.html ersetzt und die URL der Seite lautet:

Dann verwenden wir die obige Methode, um die benötigten Parameter zu extrahieren

3. Durch window.location.open

Wenn Sie eine neue Seite öffnen möchten, anstatt die aktuelle Seite zu ändern, ist window.location.href nicht anwendbar. Zu diesem Zeitpunkt müssen wir window.location.open() verwenden, um dies zu erreichen

Lassen Sie uns kurz die Funktion window.open() vorstellen. Window.open() hat drei Parameter. Der erste Parameter ist die URL der zu öffnenden Seite, der zweite Parameter ist das Fensterziel und der dritte Parameter ist eine bestimmte Zeichenfolge und ein Boolescher Wert, der angibt, ob die neue Seite die aktuell geladene Seite im Browserverlauf ersetzt. Nur der erste Parameter muss übergeben werden. Der zweite Parameter kann auch ein spezieller Fenstername wie „_blank“, „_self“, „_parent“ oder „_top“ sein. „_blank“ öffnet ein neues Fenster, während „_self“ den gleichen Effekt wie window.location.href erzielt.

Weiter mit dem obigen Beispiel:

<Skript>
    var index = "Zitrone";
    var url = "empfangen.html?index="+index;
    $("#mehr").klick(function(){
        Fenster.öffnen(URL)
    });
</Skript>

Wenn Sie auf diese Weise klicken, wird eine neue Seite geöffnet und die URL-Adresse der Seite ist dieselbe wie oben.

Aufgrund von Sicherheitsbeschränkungen fügen einige Browser Einschränkungen für die Konfiguration von Popup-Fenstern hinzu. Die meisten Browser verfügen über integrierte Popup-Fensterblocker. Daher können Popup-Fenster blockiert werden. Wenn Popup-Fenster blockiert sind, müssen zwei Möglichkeiten in Betracht gezogen werden. Eine davon ist, dass der integrierte Blocker des Browsers Popup-Fenster blockiert. In diesem Fall gibt window.open() wahrscheinlich Null zurück. Zu diesem Zeitpunkt müssen Sie nur den zurückgegebenen Wert überwachen, um festzustellen, ob das Popup-Fenster blockiert ist.

var newWin = window.open(url);
wenn(neuerGewinn == null){
    alert("Popup blockiert");
}

Das andere ist ein Popup-Fenster, das durch eine Browsererweiterung oder ein anderes Programm blockiert wird. In diesem Fall wird window.open() normalerweise einen Fehler auslösen. Um daher genau zu erkennen, ob das Popup-Fenster blockiert ist, müssen Sie window.open() in einen Try-Catch-Block einkapseln, während Sie den Rückgabewert erkennen. Das obige Beispiel kann wie folgt geschrieben werden:

<Skript>
    var blockiert = false;
    versuchen{
        var index = "Zitrone";
        var url = "empfangen.html?index="+index;
        $("#mehr").klick(function(){
           var newWin = window.open(url);
           wenn(neuerGewinn == null){
               blockiert = wahr;
           }
        });
    } Fang (Beispiel) {
        Block = wahr;
    }
    wenn(blockiert){
        alert("Popup-Fenster blockiert");
    }    
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Detaillierte Schritte zur Installation von MinIO auf Docker

>>:  Eine kurze Diskussion über adaptive Layoutprobleme auf Mobilgeräten (responsive, rem/em, Js-Dynamik)

Artikel empfehlen

Ein Artikel zum Verständnis des Ausführungsprozesses von MySQL-Abfrageanweisungen

Vorwort Wir müssen bestimmte Daten abrufen, die d...

html-Seite!--[if IE]...![endif]--Detaillierte Einführung in die Verwendung

Code kopieren Der Code lautet wie folgt: <!--[...

Detaillierte Erläuterung mehrerer Befehle in Linux zum Abrufen detaillierter Hardwareinformationen

In Linux-Systemen, insbesondere Serversystemen, i...

Ist es notwendig, einen separaten Index für die MySQL-Partitionsfeldspalte zu erstellen?

Vorwort Jeder weiß, dass das Partitionsfeld Teil ...

Installieren und verwenden Sie Git und GitHub unter Ubuntu Linux

Einführung in Git Git ist eine Open-Source-Versio...

Basiswissen: Was bedeutet http vor einer Website-Adresse?

Was ist HTTP? Wenn wir eine Website durchsuchen m...

So überprüfen Sie, wo die Metadatensperre in MySQL blockiert ist

So überprüfen Sie, wo die Metadatensperre in MySQ...

Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung

Wenn Komponenten detaillierter werden, treten Sit...

JavaScript-Grundlagen dieser Verweisung

Inhaltsverzeichnis Das Verfahren Im Objekt Verste...

HTML CSS3 streckt den Bildanzeigeeffekt nicht

1. Verwenden Sie das Transform-Attribut, um das B...

Grundsätze für die Bereitstellung und Konfiguration mehrerer Tomcat-Instanzen

1. Schalten Sie die Firewall aus und übertragen S...

Grundlegendes Tutorial zur Bedienung von Dateien und Berechtigungen in CentOS

Vorwort Bevor wir beginnen, sollten wir uns kurz ...

So richten Sie virtuelle Verzeichnisse ein und konfigurieren virtuelle Pfade in Tomcat 7.0

Tomcat7.0 legt virtuelles Verzeichnis fest (1) De...

Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0

Vorwort Seit der offiziellen Einführung von vue3....

Warum wird UTF-8 in MySQL nicht empfohlen?

Ich bin kürzlich auf einen Fehler gestoßen, als i...