EXTJS 是一个强大的JavaScript 框架，用于构建富客户端Web应用程序。在EXTJS中，前端与后端的数据交互是通过Ajax请求实现的，这使得页面可以在不刷新的情况下与服务器进行通信。本文将详细介绍EXTJS中两种主要的前后台数据传递方法：`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。
`Ext.Ajax.request` 是EXTJS提供的一个全局Ajax对象，用于发送异步HTTP请求。它的基本使用方法如下：
```javascript
Ext.Ajax.request({
url: 'your_server_url',
method: 'POST', // 可选'GET', 'POST', 'PUT', 'DELETE'
params: {key: value}, // 发送到服务器的数据
success: function(response, options) {
var obj = Ext.util.JSON.decode(response.responseText);
// 处理成功的回调
},
failure: function(response, options) {
// 处理失败的回调
}
});
```
在`success`回调函数中，`response.responseText` 用于获取服务器返回的JSON字符串，然后通过 `Ext.util.JSON.decode()` 解析成JavaScript对象，以便进一步处理。如果服务器返回的数据格式如`{success: true, msg: '操作成功！'}`，你可以检查 `obj.success` 的值来判断操作是否成功，并根据 `msg` 显示相应的消息。
另一种常见的数据交互方式是通过`FormPanel`的`getForm().submit()`，它会把表单数据以POST或GET方式发送到指定URL。例如：
```javascript
var G = new Ext.form.FormPanel({});
G.getForm().submit({
url: 'your_server_url',
// waitMsg: '正在提交表单数据，请稍候……', // 这里无法设置等待消息
failure: function(form, action) {
Ext.MessageBox.alert('警告', action.result.errors);
},
success: function(form, action) {
Ext.MessageBox.alert('信息', action.result.msg);
}
});
```
在这里，`failure` 和 `success` 回调函数的第二个参数 `action` 包含了服务器响应的详细信息，如 `action.result.msg` 可以获取到服务器返回的消息。然而，`Ext.Ajax.request` 的一个显著缺点是不支持 `waitMsg` 属性，这意味着无法在请求期间显示等待消息，而`FormPanel`的`submit`方法则可以直接设置。
总结来说，EXTJS 提供了两种主要的前后台数据交互方式：`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。前者适用于更灵活的异步请求，后者则适合于表单提交场景。在实际应用中，开发者应根据需求选择合适的方法，并合理处理服务器返回的数据，以实现高效且用户友好的Web应用。
