Maison > Article > interface Web > jQuery-Ajax demande des données Json et les charge sur la page frontale
jQuery-Ajax demande des données Json et les charge sur la page frontale
- 不言original
- 2018-07-09 10:51:072460parcourir
Cet article présente principalement jQuery-Ajax pour demander des données Json et les charger sur la page front-end. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
. La technologie Ajax est largement utilisée, cette technologie de chargement asynchrone peut mettre à jour le contenu d'un site Web sans actualiser la page Web, que ce soit globalement ou localement, donc tout le monde devrait apprendre cette technique et utiliser la technologie.
Créer un fichier demo.json, utilisé comme source de données :
{
"title":"Segmentfault",
"url":"https://segmentfault.com"
}Créer un fichier index.html, une page frontale et charger les données
<!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> requises dans la page Présentation de la bibliothèque jQuery
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Écrire une interface API RESTful avec Node
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!