EasyUI 是一个基于 jQuery 的 UI 框架，它提供了丰富的组件和控件，使得开发者可以快速构建出美观、功能丰富的用户界面，在 Web 开发中，我们经常需要通过 AJAX 请求从服务器获取数据，并将其展示在页面上，EasyUI 中的 Datagrid 组件是一个非常流行的表格控件，它可以通过 JSON 格式的数据源进行数据的展示，本文将详细介绍如何使用 EasyUI 的 Datagrid 组件，并通过 AJAX 请求从服务器获取 JSON 数据。
我们需要创建一个简单的 HTML 页面，并引入必要的 EasyUI 和 jQuery 库，你可以通过 CDN 或者下载这些库到本地服务器，以下是一个基本的 HTML 页面结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI Datagrid with JSON Data</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" style="width:100%;height:100%"></table>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
// 配置 Datagrid 属性
url: 'your_server_url', // 服务器数据接口 URL
method: 'get', // 请求方法
columns: [[
{field: 'id', title: 'ID', width: 100},
{field: 'name', title: 'Name', width: 120},
{field: 'age', title: 'Age', width: 80, align: 'right'},
{field: 'city', title: 'City', width: 100}
]],
// 其他配置...
});
});
</script>
</body>
</html>
在上面的代码中，我们创建了一个 Datagrid 表格，并设置了 url 属性为服务器数据接口的 URL，这样，当页面加载时，Datagrid 会自动发送 AJAX 请求到指定的 URL，获取数据并展示在表格中。
接下来，我们需要在服务器端创建一个数据接口，该接口能够返回 JSON 格式的数据，以下是一个简单的 PHP 示例：
<?php
// server.php
header('Content-Type: application/json');
$users = array(
array('id' => 1, 'name' => 'John Doe', 'age' => 30, 'city' => 'New York'),
array('id' => 2, 'name' => 'Jane Smith', 'age' => 25, 'city' => 'Los Angeles'),
// ... 其他用户数据
);
echo json_encode($users);
?>
在这个 PHP 脚本中，我们创建了一个包含用户信息的数组，并使用 json_encode 函数将其转换为 JSON 格式的字符串，我们通过设置 Content-Type 响应头为 application/json，确保客户端能够正确解析返回的数据。
当客户端的 Datagrid 组件加载时，它会自动发送 AJAX 请求到服务器的 server.php 接口，服务器返回 JSON 数据后，Datagrid 组件会解析这些数据，并将其展示在表格中。
本文介绍了如何使用 EasyUI 的 Datagrid 组件通过 AJAX 请求从服务器获取 JSON 数据，我们创建了一个基本的 HTML 页面，配置了 Datagrid 的 url 属性，并在服务器端创建了一个返回 JSON 数据的接口，通过这种方式，我们可以轻松地在 Web 页面上展示动态数据。