So implementieren Sie das Routing mit einer einzelnen Seitenanwendung, die nur mit jQuery erstellt wurde

Wenn der Benutzer gerade ein Wort in das Textfeld eingibt und die Suche startet, wird das Formular mit $.get() übergeben. Die Daten (JSON) werden vom Server abgerufen und anschließend wird die Benutzeroberfläche aktualisiert.So implementieren Sie das Routing mit einer einzelnen Seitenanwendung, die nur mit jQuery erstellt wurde

Was ich tun möchte, ist recht einfach:

1) Wenn das Formular abschickt, muss die URL des Browsers aktualisieren (so etwas wie search/zyx, zyx ist, was die Nutzer suchen).

2) wenn die Seite in Favoriten gebucht wird oder als Link von irgendwo geklickt wird, muss die Seite geladen werden und dann muss der Textfeldwert 'zyx' sein. Außerdem muss die Benutzeroberfläche das Suchergebnis zyx anzeigen.

Dies ist wichtig für meine App, weil ich Google Analytics verwenden werde. Daher wird die URL benötigt, um das Verhalten widerzuspiegeln. Plus das andere Problem wie die Geschichte der Zurück-Taste. Ist dies möglich, verwenden Sie nur jQuery oder einige extrem leichte Bibliotheken, die auf jQuery aufbauen. Ich habe überall gesucht und alle gefundenen Lösungen verwendeten MVC-Frameworks. Oder eine andere Lösung war, ein Template-Framework wie this one zu verwenden. Allerdings ist meine App für diese Lösungen viel zu einfach.

Quelle

2017-01-02 Moqbel

Betrachten Sie Framework wie AngularJS/ReactJS usw. –

Das wird das Problem sicher lösen, aber ich muss diese Frameworks lernen, nicht, dass ich nicht will. Aber ich suche nach einem einfachen Weg mit meinen aktuellen Fähigkeiten :). Außerdem ist meine App so einfach, dass die Verwendung eines SPA-Frameworks ein Overkill ist, speziell mit der Zeit, die ich brauche, um sie zu lernen und dann meine App zu codieren. – Moqbel

Sofern das nicht der einzige Weg ist, muss ich es trotzdem tun. Nur faul sein, lol! – Moqbel

Lesen Sie diesen Artikel: https://rosspenman.com/pushstate-jquery/

Oder man denke an der Verwendung von PageJs

Quelle

2017-01-02 11:34:05

Also, der Ansatz, den Sie Sie brauchen, ist zu Hash Änderungen in der URL und auf diese die aktuelle Seite erhalten basierend zu hören und machen es in ein Münzmeister. Etwas wie dieses:

<a href="#page2">Go to Page 2</a> 
<div class="page-container"></div> 
<script> 
$(window).on('hashchange',function(){ 
    var page = window.location.hash; 
    $.get('pages/'+page+'.html', function(pageContent){ 
    $('.page-container').html(pageContent); 
    }) 
}); 
</script>

Quelle

2017-01-02 11:35:05

Wenn ich verstehe, dass Sie die URL des Benutzers ändern möchten, wenn einige Aktionen ausgeführt werden. Es ist ein anderes Thema, über das HERE, und sie verwenden

window.location.replace(url)

Hoffe, dass es Ihnen hilft :)

Quelle

2017-01-02 11:35:25 Ilphrin

Danke für Ihren Vorschlag @lplphrin aber 'window.location.replace (url) 'wird dazu führen, dass die Seite aktualisiert wird und dass der gesamte Zweck der App als einzelne Seitenanwendung missbraucht wird – Moqbel

Danke jeden. So endete ich mit einer Kombination zwischen @Tulio Faria 's Antwort und @Gabriele Mantovani.

Um die Suche Stichwort von url gewöhnungs ich window.location.hash
url history.pushState({id: 'query'}, '', 'some_url_string'); verwendet
$(window).on('hashchange',function(){...}) zur Aktualisierung Seite des aktuellen Suche Schlüsselwort zu laden, wenn entweder zurück oder vorwärts Tasten des Browsers angeklickt wurden

Quelle

2017-01-07 16:07:37 Moqbel

So implementieren Sie das Routing mit einer einzelnen Seitenanwendung, die nur mit jQuery erstellt wurde

Antwort

Verwandte Themen