AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術，它允許網頁在不刷新整個頁面的情況下與服務器進行異步通信。而JQGrid是一款基于jQuery的表格插件，可以通過使用AJAX異步獲取數據來填充表格。本文將介紹如何使用AJAX異步獲取數據，并將其放入JQGrid表格中。

假設我們有一個商品管理系統，需要展示所有商品的信息。我們可以使用AJAX來從服務器獲取商品數據，并將其展示在JQGrid表格中。以下是一個簡單的例子：

// HTML代碼
<div id="gridContainer"></div>
// JavaScript代碼
$(document).ready(function(){
$.ajax({
url: "getData.php",
type: "GET",
dataType: "json",
success: function(data){
$("#gridContainer").jqGrid({
data: data,
datatype: "local",
colNames: ["商品ID", "商品名稱", "商品價格"],
colModel: [
{name: "id", index: "id", width: 100},
{name: "name", index: "name", width: 200},
{name: "price", index: "price", width: 150}
],
rowNum: 10,
pager: "#gridPager",
sortname: "id",
viewrecords: true,
sortorder: "asc",
caption: "商品列表"
});
}
});
});

在上面的例子中，我們使用了jQuery的AJAX方法來從服務器獲取商品數據。首先，我們指定了一個URL（getData.php）來獲取數據。然后，我們指定了請求的類型（GET），并將數據類型設置為JSON格式。當AJAX請求成功完成后，我們將返回的數據作為參數傳遞給success回調函數。在此回調函數中，我們使用JQGrid插件創建了一個表格，并將數據填充到表格中。然后，我們定義了表格的一些屬性，例如列名、列模型、每頁顯示的行數等。

通過上述代碼，我們可以實現一個簡單的商品列表展示功能。當頁面加載完成時，AJAX請求將發送到服務器，并返回商品數據。然后，數據將填充到JQGrid表格中，并顯示在頁面上。用戶可以使用表格的排序、搜索和分頁功能來瀏覽商品列表。

除了展示商品列表之外，我們還可以使用AJAX異步獲取其他類型的數據，并放入JQGrid表格中。例如，我們可以獲取用戶訂單數據并展示在表格中：

// HTML代碼
<div id="gridContainer"></div>
// JavaScript代碼
$(document).ready(function(){
$.ajax({
url: "getOrderData.php",
type: "GET",
dataType: "json",
success: function(data){
$("#gridContainer").jqGrid({
data: data,
datatype: "local",
colNames: ["訂單ID", "訂單日期", "訂單金額"],
colModel: [
{name: "id", index: "id", width: 100},
{name: "date", index: "date", width: 200},
{name: "amount", index: "amount", width: 150}
],
rowNum: 10,
pager: "#gridPager",
sortname: "id",
viewrecords: true,
sortorder: "asc",
caption: "訂單列表"
});
}
});
});

在上面的例子中，我們針對訂單數據使用了類似的代碼。我們使用了不同的URL（getOrderData.php），并根據訂單的特定字段來定義表格的列名和列模型。通過這種方式，我們可以根據不同的數據類型來動態地創建JQGrid表格，并展示對應的數據。

總結起來，使用AJAX異步獲取數據并將其放入JQGrid表格中可以實現動態展示數據的功能。無論是商品列表、訂單列表還是其他類型的數據，我們都可以通過AJAX請求來獲取數據，并使用JQGrid插件來創建表格和展示數據。這樣，我們可以提供給用戶一個更加交互式和直觀的界面，提升用戶體驗。