ExtJS分页组件通过JSP后端传递数据的示例代码详解
时间：2026-06-11 07:11
展示了ExtJS分页组件与JSP后端的数据传递流程：前端利用JsonStore和PagingToolbar构建分页网格，后端Servlet生成JSON字符串并转发至JSP页面输出。关键实现要点是JSP中仅保留@page指令，避免多余字符以确保JSON正确解析。
在前端开发中，利用ExtJS分页组件配合JSP后端实现数据传递是一个非常常见的需求。本文通过一个完整示例，详细展示从ExtJS网格面板搭建、后端Servlet处理数据，到JSP页面响应输出的完整流程。开发者可直接参考此模式应用于实际项目。
```js
Ext.onReady(function() {
store3 = new Ext.data.JsonStore({
autoDestroy: true,
totalProperty : 'totle',
url: 'service.do',
storeId: 'myStore',
root: 'data',
fields : [ 'id', "name", "pw" ]
});
var pagingToolbar = new Ext.PagingToolbar({
emptyMsg : "没有数据",
displayInfo : true,
displayMsg : "显示从{0}条数据到{1}条数据，共{2}条数据",
store : store3,
pageSize : 50
});
var grade = new Ext.grid.GridPanel({
title : "数据列表",
store : store3,
height : 300,
bbar : pagingToolbar,
columns : [ {
header : "id",
dataIndex : "id",
width : 300
}, {
header : "name",
dataIndex : "name",
width : 300
}, {
header : "pw",
dataIndex : "pw"
} ],
region : 'center'
});
var panel = new Ext.Viewport({
layout : 'border',
items : [ grade ]
});
});
```
数据交互流程示意
后端Servlet的代码实现非常直观：生成50条模拟数据，并将其拼接为JSON字符串，通过request转发至JSP页面进行输出。
```ja va
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
List list = new ArrayList();
for (int i = 0; i < 50; i++) {
Person p = new Person();
p.setId("id" + i);
p.setName("name" + i);
p.setPw("pw" + i);
list.add(p);
}
StringBuffer info = new StringBuffer();
info.append("{totle:2000,data:");
info.append(JSONArray.fromObject(list));
info.append("}");
System.out.println(info.toString());
System.out.println("*****doPos");
request.setAttribute("info", info.toString());
request.getRequestDispatcher("/info.jsp").forward(request, response);
}
```
info.jsp文件注意事项：该页面除了@page指令外，不得包含任何多余文字或空白字符，否则会导致JSON解析失败。
```ja va
<%@ page language="ja va" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
${info}
```
最后，在web.xml中配置Servlet映射，将所有以.do结尾的请求交由指定Servlet处理。
```xml
test
com.aa.TestAction
test
*.do
index.jsp
```
整个流程执行完毕后，前端分页组件即可成功获取并展示数据。在实际部署时需特别注意：JSP页面中除@page指令外，不应存在任何多余字符，否则将导致JSON解析异常。
