Wie richtet man Browsersync ein, um AJAX-Anfragen korrekt zu bedienen?

Ich versuche Browsersync zum Laden von Dokumenten über AJAX einzurichten.Wie richtet man Browsersync ein, um AJAX-Anfragen korrekt zu bedienen?

gulpfile.js 
index.html 
load-me.html

Simplified Browsersync Einstellungen

gulp.task('server',() => 

    browserSync.init({ 
    files: '*.html', 
    server: { 
     baseDir: './' 
    }, 
    port: 9000, 
    notify: false 
    }); 
});

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Try to load content via AJAX</title> 
</head> 
<body> 

    <button>Click me</button> 
    <div id="result"></div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
    <script> 
    $(function(){ 
    $('button').click(function(){ 
     $('#result').load('load-me.html'); 
    }); 
    }); 
    </script> 

</body> 
</html>

Last Me.html

Alle Dateien werden im Projektstammordner gespeichert 210

Wenn ich MAMP-Server starte, funktioniert alles gut. Die Browsersync-Einstellungen sind jedoch beschädigt. Und ich kann es nicht reparieren. Bitte, helfen Sie, wer weiß. Diese

Vielen Dank im Voraus :)

Quelle

2016-04-16 Vladimir

ist, weil Browser-Sync ändert die Antwort jedes Mal, wenn Sie für eine html Seite anfordern. Die geänderte Seite html enthält ein Skript mit einer document.write. Wenn Sie Ihr html Quellcode überprüfen sollten Sie etwas sehen:

<script id="__bs_script__">//<![CDATA[ 
    document.write("<script async src='/browser-sync/browser-sync-client.2.12.3.js'><\/script>".replace("HOST", location.hostname)); 
//]]></script>

Dies geschieht für load-me.html Seite auftreten, wenn es in einem browser-sync Server als auch anfordert. Die modifizierte HTML-Antwort, die in das Element #result eingefügt wird, wird auch das obige Skript eingefügt haben, das die document.write erneut ausführt und dadurch die gesamte HTML-Seite überschreibt.

Es gibt zwei Optionen für die Lösung:

Ziel spezifischen HTML-Tags, die Sie von loading page fragments innerhalb #result von der load-me.html HTML-Seite eingefügt werden soll. Beispiel unten.

Javascript

$('#result').load('load-me.html h1');

Das obige Beispiel sollte nur stecken Sie das h1 Element innerhalb der load-me.html Seite, und nicht die gesamten load-me.html HTML-Inhalte.

Sie wählen können nur die HTML-Inhalte, die Sie innerhalb load-me.html müssen ohne html und body Tags.

Quelle

2016-04-16 15:02:59 ryeballar

Vielen Dank. Ich werde versuchen, Lösung so schnell wie möglich :) – Vladimir

10x, @ryeballar. Es ist geladen!) – Vladimir

Wie richtet man Browsersync ein, um AJAX-Anfragen korrekt zu bedienen?

Antwort

Verwandte Themen