Was ist der beste Weg, um den Seiteninhalt zu wechseln, ohne erneut zu laden?

-1

Ich möchte den Seiteninhalt ändern, ohne die ganze Seite neu zu laden.
Aber auch ich möchte die URL ändern, <title> Tag und fügen Sie Browserverlauf während der Seite ändern. So etwas wie auf YouTubeWas ist der beste Weg, um den Seiteninhalt zu wechseln, ohne erneut zu laden?

Ich habe versucht, mit diesem Code:

$('.header a').click(function() { 
    $('.container').load(this.href + " .container > *"); 
    return false 
});

Aber es löst nicht alle meine Probleme.

Kann mir jemand sagen, wie soll ich das machen und was soll ich benutzen (vielleicht AngularJS oder so)?

Quelle

2016-07-30 Night

Verwendung Winkel js Routing – brk

Verwendung spfjs, kann es tun, was Sie – YOU

Sie könnten pjax verwenden. Von ihm ist github page es sagt.

pjax ist eine jQuery-Plugin, das Ajax und pushstate verwendet ein schnelles Browsing-Erlebnis mit echten Permalinks, Seitentitel und einer Arbeits Zurück-Taste zu liefern.

pjax funktioniert, indem Sie HTML von Ihrem Server über Ajax greifen und den Inhalt eines Containers auf Ihrer Seite mit dem Ajax'd HTML ersetzen. Dann aktualisiert die aktuelle URL des Browsers mithilfe von pushState, ohne das Layout Ihrer Seite oder Ressourcen (JS, CSS) neu zu laden, wodurch das Erscheinungsbild einer schnellen vollständigen Seitenauslastung angezeigt wird. Aber es ist wirklich nur Ajax und PushState.

Betrachten Sie dieses Beispiel.

<!DOCTYPE html> 
<html> 

<head> 
    <!-- styles, scripts, etc --> 
</head> 

<body> 
    <h1>My Site</h1> 
    <div class="container" id="pjax-container"> 
    Go to <a href="/page/2">next page</a>. 
    </div> 
</body> 

</html>

Ihr Skript.

$(document).pjax('a', '#pjax-container')

Wenn ein Klick auf a auftreten wird es die href attr und eine Ajax-Anforderung auf diesen Link und ganze pjax-containerpjax-container mit neuen Inhalten des ersetzen senden. Das gleiche gilt für die Form sublit.

$(document).on('submit', 'form[data-pjax]', function(event) { 
    $.pjax.submit(event, '#pjax-container') 
})

Quelle

2016-07-30 10:21:52

AngularJS ist ein Framework, das Ihre Codearchitektur dominieren wird. Es ist jedoch eine Möglichkeit, Ihr Problem mit dem Routing zu lösen: Sie haben mehrere Zustände und jeder Zustand enthält eine HTML-Vorlage. Wenn Sie in einen anderen Status wechseln, ändert sich der Seiteninhalt. Wenn Sie ein erfahrener JavaScript-Entwickler sind, möchten Sie vielleicht lernen und in die Welt von AngularJS eintauchen, aber stellen Sie sicher, dass Sie die ziemlich steile Lernkurve nehmen wollen.

Wenn Sie nur den Inhalt Ihrer Seite wechseln möchten, können Sie auch jQuery verwenden. Wählen Sie einfach ein Element auf Ihrer Seite aus und entfernen Sie dessen Inhalt. Fügen Sie dann dem Element eine weitere HTML-Vorlage hinzu. Hier ist ein Beispielcode:

$(document).ready(function() { 
    $('.pageElement').empty().html('<h2>Title</h2><p>This is some content.</p>'); 
});

Sie auch die jQuery .load() Funktion können Sie eine vorhandene HTML-Template-Datei zu einem Element injizieren:

$(document).ready(function() { 
    $('.pageElement').empty().load('/template.html'); 
});

Quelle

2016-07-30 09:35:58

Neben @ wollen ssc-hrep3 - sollten Sie vielleicht einen „Laden“ bar anstatt, das Element „leer“ hinzufügen. Manchmal antworten Ajax-Anfragen nicht mit dem Status 200 (d. H. Zeitüberschreitung der Verbindung, Fehler 500, usw.) oder nehmen einfach etwas länger als gewöhnlich zu und der Benutzer beginnt sich zu fragen, was vor sich geht. :) – tftd

Sie können diese $ stateProvider verwenden tun. In routes.js eingestellten Zustand

.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    '$httpProvider', 
    '$locationProvider', 
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) { 
     $urlRouterProvider.otherwise('home'); 
     $stateProvider 
     .state('login', { 
      url: '/login', 
      data: { isPublic: true }, 
      templateUrl: 'templates/AdminUser/login.html', 
      controller: 'AdminUserController' 
     }); 
    }]);

und in Controller wenn u umleiten diese einzuloggen dann verwenden wie

$state.transitionTo('login');

dies ist kurz Beispiel können Sie MULTIPAL Zustand wie auf diese Weise verwenden. und umleiten zu url ohne neu zu laden.

Quelle

2016-07-30 10:20:27

Was ist der beste Weg, um den Seiteninhalt zu wechseln, ohne erneut zu laden?

Antwort

Verwandte Themen