Comment interroger des données avec jQuery et les afficher sur la page

Pendant le processus de développement front-end, nous sommes souvent confrontés à des scénarios dans lesquels nous devons obtenir et afficher des données. Habituellement, nous devons renvoyer les données via l'interface backend, puis restituer les données sur la page via le framework front-end ou le code JS natif.

Parmi eux, jQuery est l'un des frameworks couramment utilisés dans le développement front-end. Il encapsule de nombreuses méthodes de fonctionnement pratiques et peut grandement simplifier le travail de développement front-end. Cet article explique comment utiliser jQuery pour interroger des données et les afficher sur la page.

1. Données de requête jQuery

1. Requête Ajax

Dans le front-end, utilisez Ajax pour obtenir des données de manière asynchrone à partir de l'arrière-plan. Grâce à jQuery, nous pouvons facilement effectuer des requêtes Ajax. Par exemple :

$.ajax({
    url: "/api/data",
    method: "GET",
    data: {
        id: 123
    },
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.error(err);
    }
})

Dans le code ci-dessus, nous effectuons une requête GET pour obtenir les données avec l'identifiant 123 à partir de l'adresse /api/data. Après avoir réussi à obtenir les données, nous imprimons les données sur la console. /api/data地址获取id为123的数据。在成功获取数据后，我们将数据打印在控制台上。

2. JSONP请求

在跨域情况下，我们无法直接使用Ajax请求数据。此时，可以使用JSONP（JSON with Padding）技术来获取数据。通过script标签引入一个JS文件，JS文件内容为一个函数的调用，返回数据作为该函数的参数。例如：

$.ajax({
    url: "http://example.com/data?callback=parseData",
    dataType: "jsonp",
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.error(err);
    }
})

function parseData(data) {
    console.log(data);
}

上面的代码将url指向'http://example.com/data'地址，并通过callback参数指定了回调函数。同时，dataType参数指定为'jsonp'，使得jQuery会将请求转为JSONP方式。最后，在返回结果时，我们调用了parseData函数，将数据作为参数传入。

二、jQuery显示数据

获取到数据之后，我们需要将其渲染至页面上。这里，我们介绍两种常见的渲染方式。

1. innerHTML

innerHTML是原生JS提供的一个属性，能够获取或设置某个元素的HTML内容。我们可以通过jQuery获取到需要渲染数据的元素，然后使用innerHTML将数据渲染至该元素内。例如：

假设页面上有一个<div>元素，我们使用jQuery获取该元素，并将数据渲染至该元素上。

<div id="content"></div>

var data = "<p>这是一段数据</p>";

$("#content").html(data);

2. 模板引擎

模板引擎是一种将数据与模板合并的技术，能够将数据渲染至页面上。常见的模板引擎包括Mustache、Handlebars等。除了原生JS外，我们也可以使用jQuery提供的$.tmpl方法来实现模板渲染。例如：

假设页面上有一个<ul>元素，我们需要从后台获取一个数组，数组中包含若干个对象，每个对象包含id和name属性。我们可以使用以下代码将数据渲染至页面上。

<ul id="list">
</ul>

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <li>
        <span class="id">${id}</span>
        <span class="name">${name}</span>
    </li>
</script>

var data = [
    { id: 1, name: "数据1" },
    { id: 2, name: "数据2" },
    { id: 3, name: "数据3" }
];

$("#list").html($("#itemTmpl").tmpl(data));

在上面的代码中，我们先定义了一个<script>标签，通过type属性指定其为text/x-jquery-tmpl类型的模板。模板中使用${}来引用数据属性，这里的id和name对应了数据对象中的id和name属性。最后，我们通过$("#itemTmpl").tmpl(data)将数据渲染至模板上，并将结果通过$("#list").html()

Requête JSONP

Dans les situations inter-domaines, nous ne pouvons pas utiliser directement Ajax pour demander des données. À l'heure actuelle, vous pouvez utiliser la technologie JSONP (JSON with Padding) pour obtenir des données. Un fichier JS est introduit via la balise de script. Le contenu du fichier JS est un appel à une fonction et les données sont renvoyées en tant que paramètre de la fonction. Par exemple :

rrreee🎜Le code ci-dessus pointe l'url vers l'adresse 'http://example.com/data' et spécifie la fonction de rappel via le paramètre de rappel. Dans le même temps, le paramètre dataType est spécifié comme « jsonp », afin que jQuery convertisse la requête en JSONP. Enfin, lors du renvoi des résultats, nous appelons la fonction parseData, en passant les données en paramètre. 🎜🎜2. jQuery affiche les données🎜🎜Après avoir obtenu les données, nous devons les restituer sur la page. Ici, nous introduisons deux méthodes de rendu courantes. 🎜🎜🎜innerHTML🎜🎜🎜innerHTML est un attribut fourni par JS natif, qui peut obtenir ou définir le contenu HTML d'un certain élément. Nous pouvons utiliser jQuery pour obtenir l'élément qui doit restituer les données, puis utiliser innerHTML pour restituer les données dans l'élément. Par exemple : 🎜🎜Supposons qu'il y ait un élément <div> sur la page. Nous utilisons jQuery pour obtenir l'élément et restituer les données dans l'élément. 🎜rrreeerrree
🎜Moteur de modèles🎜🎜🎜Le moteur de modèles est une technologie qui combine des données avec des modèles pour afficher les données sur la page. Les moteurs de modèles courants incluent Moustache, Guidon, etc. En plus du JS natif, nous pouvons également utiliser la méthode $.tmpl fournie par jQuery pour implémenter le rendu des modèles. Par exemple : 🎜🎜Supposons qu'il y ait un élément <ul> sur la page. Nous devons obtenir un tableau à partir de l'arrière-plan. Le tableau contient plusieurs objets, chaque objet contient des attributs id et name. Nous pouvons utiliser le code suivant pour afficher les données sur la page. 🎜rrreeerrreee🎜Dans le code ci-dessus, nous définissons d'abord une balise <script> et la spécifions comme modèle de type text/x-jquery-tmpl via l'attribut type. Utilisez ${} dans le modèle pour référencer les attributs de données. L'identifiant et le nom correspondent ici aux attributs id et name dans l'objet de données. Enfin, nous rendons les données dans le modèle via $("#itemTmpl").tmpl(data) et transmettons le résultat via $("#list").html() code>Rendu sur la page. 🎜🎜Résumé🎜🎜Cet article explique comment utiliser jQuery pour interroger des données et les afficher sur la page. Parmi eux, les données d'arrière-plan peuvent être obtenues via Ajax et JSONP, et les moteurs innerHTML et de modèles peuvent restituer les données sur la page. Grâce à ces technologies, nous pouvons effectuer le développement frontal plus facilement et améliorer l'efficacité du travail. 🎜

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!