easyuiurljson数据怎么传来

EasyUI中如何通过URL获取JSON数据并加载到组件

在基于EasyUI的前端开发中,通过URL异步获取JSON数据并加载到组件（如DataGrid、ComboBox、Tree等）是最常见的场景之一，EasyUI提供了内置的数据加载机制，结合jQuery的Ajax功能，可以高效实现前后端数据交互，本文将详细介绍EasyUI组件如何通过URL接收JSON数据，包括核心配置、参数传递、数据处理及常见问题解决。

EasyUI组件加载数据的核心原理

EasyUI的大部分数据组件（如datagrid、combobox、tree等）都支持通过url属性指定数据源地址，组件初始化时，会自动向该URL发送HTTP请求（默认GET方式），并期望服务器返回符合特定格式的JSON数据，组件接收到数据后，会自动解析并渲染到界面中。

核心属性说明

url：服务器端数据接口的地址（可以是相对路径或绝对路径），组件将通过该地址获取JSON数据。
method：请求方式，默认为"GET"，可根据后端需求设置为"POST"等。
queryParams：发送请求时携带的额外参数，可以是对象或函数（函数返回对象）。
loadMsg：数据加载时显示的提示信息，默认为"正在加载数据，请稍候..."。

通过URL加载JSON数据的基本步骤

后端接口准备

后端需提供一个能返回JSON数据的接口,返回的数据格式需符合EasyUI组件的默认要求，以datagrid为例，默认期望的JSON格式为：

{
    "total": 100,        // 数据总数量（用于分页）
    "rows": [            // 数据行数组
        {"id": 1, "name": "张三", "age": 25},
        {"id": 2, "name": "李四", "age": 30}
    ]
}

若组件不需要分页（如combobox），可直接返回数组：

[
    {"id": 1, "text": "选项1"},
    {"id": 2, "text": "选项2"}
]

前端组件配置

以datagrid为例，通过url属性绑定接口地址，组件会自动请求并加载数据：

<table id="dg"></table>
<script>
$(function(){
    $('#dg').datagrid({
        url: '/api/user/list',    // 后端数据接口
        columns: [[               // 定义列
            {field: 'id', title: 'ID', width: 50},
            {field: 'name', title: '姓名', width: 100},
            {field: 'age', title: '年龄', width: 80}
        ]],
        pagination: true,         // 开启分页
        pageSize: 10,             // 每页显示数量
        pageList: [10, 20, 50]    // 每页可选数量
    });
});
</script>

上述代码中,datagrid初始化时会自动向/api/user/list发送GET请求，后端返回的JSON数据会被自动解析并填充到表格中。

传递自定义参数到后端

实际开发中,常需要根据用户操作（如搜索条件、分页参数）向服务器传递额外参数，EasyUI提供了两种方式传递参数：

使用`queryParams`属性（固定参数）

若参数固定（如默认按名称搜索），可直接通过queryParams传递：

$('#dg').datagrid({
    url: '/api/user/list',
    queryParams: {
        name: '张三',    // 固定参数
        status: 1       // 固定参数
    },
    columns: [[...]]
});

使用`queryParams`函数（动态参数）

若参数需动态获取（如根据输入框内容搜索），可通过函数返回参数对象：

$('#dg').datagrid({
    url: '/api/user/list',
    queryParams: function(params){
        return {
            name: $('#searchName').val(),  // 获取输入框的值
            page: params.pageNumber || 1,  // 当前页码（EasyUI分页组件自动传递）
            rows: params.pageSize || 10    // 每页数量（EasyUI分页组件自动传递）
        };
    },
    columns: [[...]],
    pagination: true
});

注意：当开启分页时，EasyUI会自动向queryParams函数中传递pageNumber（当前页码）、pageSize（每页数量）等参数，可直接传递给后端实现分页。

处理服务器返回的JSON数据

默认数据格式解析

如前所述,datagrid默认期望{total: 总数, rows: 数据数组}的格式，若后端返回的数据格式不同，可通过loadFilter进行转换：

$('#dg').datagrid({
    url: '/api/user/list',
    loadFilter: function(data){
        // 假设后端返回{code: 0, message: 'success', data: {total: 100, list: [...]}}
        if(data.code === 0){
            return {
                total: data.data.total,
                rows: data.data.list
            };
        }else{
            $.messager.alert('提示', data.message);
            return {total: 0, rows: []};
        }
    },
    columns: [[...]]
});

自定义成功/失败回调

通过onLoadSuccess和onLoadError可监听数据加载状态：

$('#dg').datagrid({
    url: '/api/user/list',
    onLoadSuccess: function(data){
        console.log('数据加载成功', data);
        $.messager.show({title: '提示', msg: '数据加载成功！', timeout: 2000});
    },
    onLoadError: function(){
        console.error('数据加载失败');
        $.messager.alert('错误', '数据加载失败，请稍后重试！');
    },
    columns: [[...]]
});

常见问题及解决方案

跨域问题

若前端页面与后端接口不在同一域名下,会出现跨域请求被拦截的问题，需后端配置CORS（跨域资源共享），例如在Spring Boot中添加：

@CrossOrigin(origins = "http://localhost:8080")  // 允许的前端域名
@RestController
public class UserController {
    @GetMapping("/api/user/list")
    public Map<String, Object> list(){
        // 返回数据
    }
}

数据格式不匹配

若datagrid显示空白或数据错乱，通常是后端返回的JSON格式不符合EasyUI默认要求，可通过浏览器开发者工具（F12）的“Network”面板查看接口返回数据，确认格式是否正确，或通过loadFilter进行转换。

分页参数未传递

若分页功能失效,检查后端是否正确接收了page和rows参数（EasyUI分页默认传递的参数名），或通过queryParams函数显式传递：

queryParams: function(){
    return {
        page: $('#dg').datagrid('getPager').data("pagination").options.pageNumber,
        rows: $('#dg').datagrid('getPager').data("pagination").options.pageSize
    };
}

完整示例：DataGrid通过URL加载带分页的JSON数据

后端接口（Spring Boot示例）

@RestController
@RequestMapping("/api/user")
public class UserController {
    @GetMapping("/list")
    public Map<String, Object> list(
            @RequestParam(defaultValue = "1") int page,
            @RequestParam(defaultValue = "10") int rows,
            @RequestParam(required = false) String name){
        // 模拟数据库查询（实际项目中用MyBatis等框架）
        List<User> userList = new ArrayList<>();
        userList.add(new User(1, "张三", 25));
        userList.add(new User(2, "李四", 30));
        Map<String, Object> result = new HashMap<>();
        result.put("total", userList.size());  // 总数量
        result.put("rows", userList);          // 数据列表
        return result;
    }
}
class User{
    private int id;
    private String name;
    private int age;
    // 构造方法、getter/setter省略
}

前端页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">EasyUI DataGrid 示例</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-1.12.4.min.js"></script>
    <script

快连

快连下载

快连官网

快连电脑版

快连下载

快连登录