jQuery-Ajax demande des données Json et les charge sur la page frontale-js tutoriel-php.cn

jQuery-Ajax demande des données Json et les charge sur la page frontale

不言

Libérer： 2018-07-09 10:51:07

original

2479 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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

Comment résoudre le mécanisme de récupération de place et les fuites de mémoire courantes dans l'élévation JS Question

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!