如何用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顯示資料

取得到資料之後，我們需要將其渲染至頁面上。這裡，我們介紹兩種常見的渲染方式。

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中文網其他相關文章！