suchen

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

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

不言
不言Original
2018-07-09 10:51:072512Durchsuche

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"
}

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>

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

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!

php restful json jquery ajax html 接口 JS 异步
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in die ES6-Klassenvererbung und SuperNächster Artikel：Einführung in die ES6-Klassenvererbung und Super

In Verbindung stehende Artikel

Mehr sehen