recherche

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:072511parcourir

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!

php restful json jquery ajax html 接口 JS 异步
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction à l'héritage et au super classe ES6Article suivant：Introduction à l'héritage et au super classe ES6

Articles Liés

Voir plus