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:072456Durchsuche
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!