ExtJS分页组件通过JSP后端传递数据的示例代码详解

在前端开发中，利用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解析异常。