如何用jQuery查询数据并显示至页面

在前端开发过程中，经常会面临需要获取并显示数据的场景。通常情况下，我们需要通过后台接口返回数据，然后通过前端框架或原生js代码将数据渲染至页面上。

其中，jQuery是前端开发中常用的框架之一，它封装了许多方便的操作方法，能够大大简化前端开发工作。本篇文章将介绍如何使用jQuery查询数据并将其显示至页面上。

一、jQuery查询数据

1. Ajax请求

在前端中，使用Ajax可以异步地从后台获取数据。通过jQuery，我们可以很方便地执行Ajax请求。例如：

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

在上面的代码中，我们执行了一个GET请求，从/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显示数据

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

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

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()渲染至页面上。

总结

本文介绍了如何使用jQuery查询数据并将其显示至页面上。其中，通过Ajax和JSONP方式可以获取后台数据，innerHTML和模板引擎可以将数据渲染至页面上。通过这些技术，我们能够更加方便地进行前端开发并提高工作效率。

以上就是如何用jQuery查询数据并显示至页面的详细内容，更多请关注php中文网其它相关文章！