extjs怎么传json数据

ExtJS 中如何高效传递 JSON 数据：从基础到实践

在 Web 应用开发中，前后端数据交互是核心环节，而 JSON 以其轻量级、易读、易于解析的特性，成为前后端数据交换的主流格式，ExtJS 作为一款成熟的 JavaScript 前端框架，提供了完善的数据处理机制，支持 JSON 数据的高效传递与解析，本文将系统介绍 ExtJS 中传递 JSON 数据的核心方法、常见场景及最佳实践,帮助开发者这一关键技术。

ExtJS 与 JSON 的基础关联

ExtJS 框架在设计之初就充分考虑了与后端服务的数据交互需求，其核心组件（如 Store、Model、Proxy 等）均内置了对 JSON 数据的支持，JSON（JavaScript Object Notation）在 ExtJS 中不仅是数据载体，更是实现数据绑定、渲染、同步的基础——前端通过 JSON 接收后端数据，ExtJS 自动将其解析为可操作的 JavaScript 对象；前端提交数据时，也可将对象序列化为 JSON 格式发送至服务端。

ExtJS 中接收 JSON 数据的常见方式

直接通过 AJAX 请求获取原始 JSON

ExtJS 提供了 Ext.Ajax 和 Ext.data.request.JsonP（跨域场景）等工具，可直接向服务端发起 HTTP 请求并接收 JSON 响应,这种方式适用于无需复杂数据绑定的简单场景。

示例：使用 Ext.Ajax 获取 JSON 数据

Ext.Ajax.request({
    url: '/api/user/list', // 后端接口地址
    method: 'GET',
    success: function(response) {
        var jsonData = Ext.decode(response.responseText); // 解析 JSON 字符串为对象
        console.log('获取到的用户数据：', jsonData);
        // 此处可进一步处理数据，如渲染到表格
    },
    failure: function(response) {
        console.error('请求失败：', response.statusText);
    }
});

关键点：

• response.responseText 是服务端返回的原始 JSON 字符串，需通过 Ext.decode()（或 JSON.parse()）解析为 JavaScript 对象；
• 服务端需正确设置 Content-Type: application/json 头,确保前端能正确识别数据格式。

通过 Store + Proxy 加载 JSON 数据（推荐）

在 ExtJS 中，Store 是数据的核心容器，负责管理数据集合（如列表、表格数据），而 Proxy 则定义了数据的来源（远程服务端或本地），通过 Store 的 proxy 配置，可自动完成 JSON 数据的请求、解析与同步，适用于数据绑定场景（如表格、列表展示）。

示例：使用 Ext.data.Store 加载远程 JSON 数据

// 1. 定义数据模型（可选，但推荐）
Ext.define('UserModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'email', type: 'string'}
    ]
});
// 2. 定义 Store，配置 Proxy
var userStore = Ext.create('Ext.data.Store', {
    model: 'UserModel', // 绑定数据模型
    proxy: {
        type: 'ajax', // 使用 AJAX 代理
        url: '/api/user/list', // 后端接口
        reader: {
            type: 'json', // 指定读取器为 JSON
            rootProperty: 'data', // JSON 数据中数组对象的根属性（如 {"data": [...] }）
            totalProperty: 'total' // 分页时总记录数对应的属性（如 {"total": 100, "data": [...] }）
        }
    },
    autoLoad: true // 自动加载数据
});
// 3. 将 Store 绑定到表格组件
Ext.create('Ext.grid.Panel', { '用户列表',
    store: userStore,
    columns: [
        {text: 'ID', dataIndex: 'id', width: 50},
        {text: '姓名', dataIndex: 'name', flex: 1},
        {text: '邮箱', dataIndex: 'email', flex: 1}
    ],
    renderTo: Ext.getBody()
});

关键配置解析：

• proxy.type: 'ajax' 表示通过 AJAX 请求远程数据，也可选择 'restful'（RESTful 风格接口）或 'jsonp'（跨域）；
• reader: 定义如何解析服务端返回的 JSON 数据，rootProperty 指向数据数组，totalProperty 用于分页（若服务端返回分页信息）；
• autoLoad: 设为 true 时，Store 创建后自动发起请求加载数据。

跨域场景：使用 JSONP 加载 JSON

当前后端接口与前端页面跨域时，直接 AJAX 请求会因同源策略被拦截，ExtJS 提供了 JsonP 代理，通过动态创建 <script> 标签绕过跨域限制。

示例：使用 Ext.data.proxy.JsonP 跨域获取 JSON

Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    proxy: {
        type: 'jsonp',
        url: 'https://api.example.com/data', // 跨域接口
        callbackKey: 'callback', // 服务端 JSONP 回调函数的参数名（如 ?callback=extCallback）
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    },
    autoLoad: true
});

注意：服务端需支持 JSONP 格式，即返回类似 extCallback({...}) 的响应，extCallback 是 ExtJS 生成的回调函数名。

ExtJS 中发送 JSON 数据到服务端

通过 Ext.Ajax 手动提交 JSON

适用于无需复杂模型绑定的场景，需手动将 JavaScript 对象序列化为 JSON 字符串。

示例：使用 Ext.Ajax 提交 JSON 数据

var userData = {
    name: '张三',
    email: 'zhangsan@example.com',
    age: 25
};
Ext.Ajax.request({
    url: '/api/user/create',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json' // 声明发送 JSON 数据
    },
    params: Ext.encode(userData), // 将对象序列化为 JSON 字符串
    success: function(response) {
        var result = Ext.decode(response.responseText);
        if (result.success) {
            Ext.Msg.alert('成功', '用户创建成功！');
        } else {
            Ext.Msg.alert('失败', result.message || '创建失败');
        }
    },
    failure: function(response) {
        Ext.Msg.alert('错误', '请求异常：' + response.statusText);
    }
});

关键点：

• Ext.encode()（或 JSON.stringify()）将 JavaScript 对象序列化为 JSON 字符串；
• 需设置 Content-Type: application/json,服务端才能正确解析请求体。

通过 Store 同步数据（自动处理 JSON）

当数据通过 Store 管理时，可通过 sync() 方法将数据变更（增、删、改）同步到服务端，ExtJS 会自动处理 JSON 的序列化与发送。

示例：使用 Store.sync() 提交数据变更

// 假设已定义 userStore（同上文示例）
var newRecord = Ext.create('UserModel', {
    name: '李四',
    email: 'lisi@example.com'
});
// 添加新记录到 Store
userStore.add(newRecord);
// 同步所有变更到服务端
userStore.sync({
    success: function(operation) {
        Ext.Msg.alert('成功', '数据同步成功！');
    },
    failure: function(operation) {
        Ext.Msg.alert('失败', '数据同步失败：' + operation.getError());
    }
});

工作原理：

• Store.sync() 会遍历 Store 中的所有变更记录（新增、修改、删除），根据 proxy 的配置自动构造请求；
• 默认情况下，ExtJS 会发送 POST（新增）、PUT（修改）、DELETE（删除）请求，请求体为 JSON 格式，字段名与 Model 定义一致。

JSON 数据格式约定与 ExtJS 解析

ExtJS 与服务端的 JSON 数据格式需提前约定，否则可能导致解析失败,以下是常见格式规范：

列表数据（分页场景）

服务端返回的 JSON 通常需包含数据数组、总记录数等字段：

{
    "total": 100,
    "data": [
        {"id": 1, "name": "张三", "email": "zhangsan@example.com"},
        {"id": 2, "name": "李四", "email": "lisi@example.com"}
    ]
}

对应 Store 的 reader 配置：