jQuery-Ajax fordert Json-Daten an und lädt sie auf die Frontend-Seite-js-Tutorial-php.cn

jQuery-Ajax fordert Json-Daten an und lädt sie auf die Frontend-Seite

不言

Freigeben： 2018-07-09 10:51:07

Original

2486 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich jQuery-Ajax vorgestellt, um JSON-Daten anzufordern und auf die Front-End-Seite zu laden. Jetzt kann ich es mit Ihnen teilen.

Die Ajax-Technologie ist weit verbreitet. Diese asynchrone Ladetechnologie kann Website-Inhalte aktualisieren, ohne die Webseite global oder lokal zu aktualisieren. Daher sollte jeder diese Technik erlernen und die Technologie nutzen.

Demo.json-Datei erstellen, die als Datenquelle verwendet wird:

{
    "title":"Segmentfault",
    "url":"https://segmentfault.com"
}

Nach dem Login kopieren

index.html-Datei und Frontend-Seite erstellen und Daten laden

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery - Ajax - Json</title>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                $.ajax({
                    type:"GET",
                    url:"demo.json",
                    dataType:"json",
                    success:function(data){
                        $("#title").text(data.title);
                        $("#url").text(data.url);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <button name="button" type="button">加载数据</button>
    <h2>title:<span id="title"></span></h2>
    <h2>url:<span id="url"></span></h2>
</body>
</html>

Nach dem Login kopieren

Die jQuery-Bibliothek muss vorhanden sein Auf der Seite vorgestellt

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

RESTful API-Schnittstelle mit Node schreiben

So lösen Sie den Garbage-Collection-Mechanismus und häufige Speicherlecks in der JS-Elevation Frage

Das obige ist der detaillierte Inhalt vonjQuery-Ajax fordert Json-Daten an und lädt sie auf die Frontend-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!