论坛首页 AJAX版 EXT

Grid的问题(不能显示服务器的JSON数据,脚本提示错误,缺少";")

浏览 1369 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
时间:2007-11-17

paging.html代码如下:
 
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4.     <title>显示学生数据</title>  
  5.     <link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css" />  
  6.     <script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>  
  7.     <script type="text/javascript" src="ext2/ext-all.js"></script>    
  8.     <script type="text/javascript" src="paging.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div id="topic-grid"></div>  
  12. </body>  
  13. </html>  
paging.js 代码
 
  1. Ext.onReady(function(){  
  2.     var store = new Ext.data.Store({  
  3.         proxy: new Ext.data.ScriptTagProxy({  
  4.             url: 'paging_data.jsp'  
  5.         }),  
  6.         reader: new Ext.data.JsonReader({  
  7.             root: 'students',  
  8.             totalProperty: 'counts',  
  9.             id: 'id',  
  10.             fields: ['student_id', 'name', 'hao','zhong','ca']  
  11.         })  
  12.     });  
  13.     var cm = new Ext.grid.ColumnModel([{  
  14.            id: 'id',   
  15.            header: "student_id",  
  16.            dataIndex: 'ca',  
  17.            width: 420  
  18.         
  19.         },{  
  20.            header: "name",  
  21.            dataIndex: 'zhong',  
  22.            width: 100  
  23.         },{  
  24.            header: "hao",  
  25.            dataIndex: 'hao',  
  26.            width: 70,  
  27.            align: 'right'  
  28.         }]);  
  29.   
  30.     cm.defaultSortable = true;  
  31.     var grid = new Ext.grid.GridPanel({  
  32.         el:'topic-grid',  
  33.         width:700,  
  34.         height:500,  
  35.         title:'学生信息表',  
  36.         store: store,  
  37.         cm: cm,  
  38.         trackMouseOver:false,  
  39.         sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),  
  40.         loadMask: true,  
  41.         viewConfig: {  
  42.             forceFit:true,  
  43.             enableRowBody:true,  
  44.             showPreview:true,  
  45.             getRowClass : function(record, rowIndex, p, store){  
  46.                 if(this.showPreview){  
  47.                     p.body = '<p>'+record.data.excerpt+'</p>';  
  48.                     return 'x-grid3-row-expanded';  
  49.                 }  
  50.                 return 'x-grid3-row-collapsed';  
  51.             }  
  52.         },  
  53.         bbar: new Ext.PagingToolbar({  
  54.             pageSize: 25,  
  55.             store: store,  
  56.             displayInfo: true,  
  57.             displayMsg: ' {0} - {1} of {2}',  
  58.             emptyMsg: "没有可以显示的数据"  
  59.         })  
  60.     });  
  61.     grid.render();  
  62.     store.load({params:{start:0, limit:25}});  
  63. });  

paging_data.jsp 代码
 
  1. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"  %>  
  2. <%@ page language="java" import="java.util.*,java.sql.*,org.jmdigit.bean.*,org.json.*" pageEncoding="UTF-8"%>  
  3. <%  
  4.     response.setHeader("Cache-Control","no-store");  
  5.     response.setHeader("Pragrma","no-cache");  
  6.     response.setDateHeader("Expires",0);  
  7.     boolean scriptTag = false;  
  8.     String cb = request.getParameter("callback");  
  9.     if (cb != null) {  
  10.         scriptTag = true;  
  11.         response.setContentType("text/javascript");  
  12.     } else {  
  13.         response.setContentType("application/x-json");  
  14.     }  
  15.     if(scriptTag)  
  16.         out.print(cb);  
  17.           
  18.     String start = request.getParameter("start");  
  19.     String limit = request.getParameter("limit");  
  20.     String sql = "select * from fen_log limit " + start + "," + limit;  
  21.     System.out.println(sql);  
  22.     DatabaseConnect dc = new DatabaseConnect();  
  23.     ResultSet rs = dc.query(sql);  
  24.     JSONArray accounts = new JSONArray();  
  25.     while(rs.next()){  
  26.         FenLog fl = new FenLog();  
  27.         fl.setStudent_id(rs.getString("student_id"));  
  28.         fl.setName(rs.getString("name"));  
  29.         fl.setClassName(rs.getString("class"));  
  30.         fl.setCa(rs.getString("ca"));  
  31.         fl.setZhong(rs.getString("zhong"));  
  32.         fl.setHao(rs.getString("hao"));  
  33.         fl.setId(rs.getString("id"));  
  34.         accounts.put(fl.toJSONObject());  
  35.     }  
  36.     rs = dc.query("select count(*) from fen_log");  
  37.     rs.next();  
  38.     String count = rs.getString("count(*)");  
  39.     JSONObject jsonResp = new JSONObject();  
  40.     jsonResp.put("students",accounts);  
  41.     jsonResp.put("counts",count);  
  42.       
  43.     response.getWriter().write(jsonResp.toString(1));  
  44. %>  

FenLog.java 代码
 
  1. package org.jmdigit.bean;  
  2. import org.json.*;  
  3. public class FenLog extends JSONObject{  
  4.     private String student_id="";  
  5.     private String name ="";  
  6.     private String className = "";  
  7.     private String hao = "";  
  8.     private String zhong = "";  
  9.     private String ca = "";  
  10.     private String id = "";  
  11.     public String getStudent_id() {  
  12.         return student_id;  
  13.     }  
  14.     public void setStudent_id(String student_id) {  
  15.         this.student_id = student_id;  
  16.     }  
  17.     public String getName() {  
  18.         return name;  
  19.     }  
  20.     public void setName(String name) {  
  21.         this.name = name;  
  22.     }  
  23.     public String getClassName() {  
  24.         return className;  
  25.     }  
  26.     public void setClassName(String className) {  
  27.         this.className = className;  
  28.     }  
  29.     public String getHao() {  
  30.         return hao;  
  31.     }  
  32.     public void setHao(String hao) {  
  33.         this.hao = hao;  
  34.     }  
  35.     public String getZhong() {  
  36.         return zhong;  
  37.     }  
  38.     public void setZhong(String zhong) {  
  39.         this.zhong = zhong;  
  40.     }  
  41.     public String getCa() {  
  42.         return ca;  
  43.     }  
  44.     public void setCa(String ca) {  
  45.         this.ca = ca;  
  46.     }  
  47.     public String getId() {  
  48.         return id;  
  49.     }  
  50.     public void setId(String id) {  
  51.         this.id = id;  
  52.     }  
  53.     public JSONObject toJSONObject(){  
  54.         JSONObject json = new JSONObject();  
  55.         json.put("id"this.id);  
  56.         json.put("student_id"this.student_id);  
  57.         json.put("className"this.className);  
  58.         json.put("name"this.name);  
  59.         json.put("hao"this.hao);  
  60.         json.put("zhong"this.zhong);  
  61.         json.put("ca"this.ca);  
  62.         return json;  
  63.     }  
  64. }  

请求后,从服务器返回的JSON代码如下:
 
  1. {  
  2.  "counts""1450",  
  3.  "students": [  
  4.   {  
  5.    "student_id""9999006150000003",  
  6.    "ca""0",  
  7.    "hao""1",  
  8.    "className""06(15)",  
  9.    "name""\u533a\u7fe0\u7389",  
  10.    "zhong""0",  
  11.    "id""247"},  
  12.   {  
  13.    "student_id""9999006150000005",  
  14.    "ca""0",  
  15.    "hao""0",  
  16.    "className""06(15)",  
  17.    "name""\u5218\u91d1\u9022",  
  18.    "zhong""1",  
  19.    "id""248"},  
  20.   {  
  21.    "student_id""9999006150000008",  
  22.    "ca""0",  
  23.    "hao""1",  
  24.    "className""06(15)",  
  25.    "name""\u6881\u8d3a\u5f3a",  
  26.    "zhong""0",  
  27.    "id""249"},  
  28.   {  
  29.    "student_id""9999006150000009",  
  30.    "ca""0",  
  31.    "hao""1",  
  32.    "className""06(15)",  
  33.    "name""\u5f20\u5065\u534e",  
  34.    "zhong""0",  
  35.    "id""250"},  
  36.   {  
  37.    "student_id""9999006150000010",  
  38.    "ca""0",  
  39.    "hao""0",  
  40.    "className""06(15)",  
  41.    "name""\u6731\u5353\u5176",  
  42.    "zhong""1",  
  43.    "id""251"},  
  44.   {  
  45.    "student_id""9999006150000011",  
  46.    "ca""1",  
  47.    "hao""0",  
  48.    "className""06(15)",  
  49.    "name""\u5434\u6811\u6d53",  
  50.    "zhong""0",  
  51.    "id""252"},  
  52.   {  
  53.    "student_id""9999006150000013",  
  54.    "ca""0",  
  55.    "hao""1",  
  56.    "className""06(15)",  
  57.    "name""\u4f59\u4ed5\u5764",  
  58.    "zhong""0",  
  59.    "id""253"},  
  60.   {  
  61.    "student_id""9999006150000017",  
  62.    "ca""1",  
  63.    "hao""0",  
  64.    "className""06(15)",  
  65.    "name""\u674e\u5747\u7965",  
  66.    "zhong""0",  
  67.    "id""254"},  
  68.   {  
  69.    "student_id""9999006150000019",  
  70.    "ca""0",  
  71.    "hao""0",  
  72.    "className""06(15)",  
  73.    "name""\u8096\u71d5\u971e",  
  74.    "zhong""1",  
  75.    "id""255"},  
  76.   {  
  77.    "student_id""9999006150000020",  
  78.    "ca""0",  
  79.    "hao""0",  
  80.    "className""06(15)",  
  81.    "name""\u9648\u7115\u7ae0",  
  82.    "zhong""1",  
  83.    "id""256"},  
  84.   {  
  85.    "student_id""9999006150000022",  
  86.    "ca""0",  
  87.    "hao""0",  
  88.    "className""06(15)",  
  89.    "name""\u82cf\u8884\u7167",  
  90.    "zhong""1",  
  91.    "id""257"},  
  92.   {  
  93.    "student_id""9999006150000023",  
  94.    "ca""1",  
  95.    "hao""0",  
  96.    "className""06(15)",  
  97.    "name""\u8d56\u654f\u950b",  
  98.    "zhong""0",  
  99.    "id""258"},  
  100.   {  
  101.    "student_id""9999006150000024",  
  102.    "ca""1",  
  103.    "hao""0",  
  104.    "className""06(15)",  
  105.    "name""\u9648\u7f8e\u8749",  
  106.    "zhong""0",  
  107.    "id""259"},  
  108.   {  
  109.    "student_id""9999006150000027",  
  110.    "ca""0",  
  111.    "hao""0",  
  112.    "className""06(15)",  
  113.    "name""\u8bb8\u5609\u67f1",  
  114.    "zhong""1",  
  115.    "id""260"},  
  116.   {  
  117.    "student_id""9999006150000029",  
  118.    "ca""0",  
  119.    "hao""0",  
  120.    "className""06(15)",  
  121.    "name""\u4f59\u6770\u6587",  
  122.    "zhong""1",  
  123.    "id""261"},  
  124.   {  
  125.    "student_id""9999006150000031",  
  126.    "ca""0",  
  127.    "hao""1",  
  128.    "className""06(15)",  
  129.    "name""\u9648\u534e\u73cd",  
  130.    "zhong""0",  
  131.    "id""262"},  
  132.   {  
  133.    "student_id""9999006150000034",  
  134.    "ca""1",  
  135.    "hao""0",  
  136.    "className""06(15)",  
  137.    "name""\u4f55\u632f\u9e4f",  
  138.    "zhong""0",  
  139.    "id""263"},  
  140.   {  
  141.    "student_id""9999006150000035",  
  142.    "ca""0",  
  143.    "hao""0",  
  144.    "className""06(15)",  
  145.    "name""\u5468\u5065\u6b22",  
  146.    "zhong""1",  
  147.    "id""264"},  
  148.   {  
  149.    "student_id""9999006150000038",  
  150.    "ca""0",  
  151.    "hao""0",  
  152.    "className""06(15)",  
  153.    "name""\u674e\u7ed3\u4f1f",  
  154.    "zhong""1",  
  155.    "id""265"},  
  156.   {  
  157.    "student_id""9999006150000039",  
  158.    "ca""1",  
  159.    "hao""0",  
  160.    "className""06(15)",  
  161.    "name""\u9ece\u6c11\u6dfb",  
  162.    "zhong""0",  
  163.    "id""266"},  
  164.   {  
  165.    "student_id""9999006150000041",  
  166.    "ca""0",  
  167.    "hao""0",  
  168.    "className""06(15)",  
  169.    "name""\u9093\u94f6\u559c",  
  170.    "zhong""1",  
  171.    "id""267"},  
  172.   {  
  173.    "student_id""9999006150000042",  
  174.    "ca""1",  
  175.    "hao""0",  
  176.    "className""06(15)",  
  177.    "name""\u9ec4\u5b8f\u654f",  
  178.    "zhong""0",  
  179.    "id""268"},  
  180.   {  
  181.    "student_id""9999006150000043",  
  182.    "ca""0",  
  183.    "hao""0",  
  184.    "className""06(15)",  
  185.    "name""\u674e\u8d85\u950b",  
  186.    "zhong""1",  
  187.    "id""269"},  
  188.   {  
  189.    "student_id""9999006150000047",  
  190.    "ca""1",  <
   
时间:2007-11-17
[quote="crabboy"]回调函数没有构造问题。在你的代码后给你一段代码,你试试看. System.out.println(builder.toString()); boolean scriptTag = false; String cb = request.getParameter("callback"); if (cb != null) { scriptTag = true; response.setContentType("text/javascript"); } else { response.setContentType("application/x-json"); } if (scriptTag) { out.write(cb + "("); } out.print(builder.toString()); if (scriptTag) { out.write(");"); } return null;[/quote] 问题已解决,非常感谢crabboy会员
   
0 请登录后投票
时间:2007-11-17
如果不是跨应用的url不要使用Ext.data.ScriptTagProxy,直接使用HttpProxy,就不用考虑回调函数了。
   
0 请登录后投票
时间:2007-11-17

[quote="tongyi121"]如果不是跨应用的url不要使用Ext.data.ScriptTagProxy,直接使用HttpProxy,就不用考虑回调函数了。[/quote]

请问怎样直接使用HttpProxy?

   
0 请登录后投票
时间:2008-03-07
vjanev 写道
[quote="crabboy"]回调函数没有构造问题。在你的代码后给你一段代码,你试试看. System.out.println(builder.toString()); boolean scriptTag = false; String cb = request.getParameter("callback"); if (cb != null) { scriptTag = true; response.setContentType("text/javascript"); } else { response.setContentType("application/x-json"); } if (scriptTag) { out.write(cb + "("); } out.print(builder.toString()); if (scriptTag) { out.write(");"); } return null;[/quote] 问题已解决,非常感谢crabboy会员
我也遇到了 缺少";" 问题, servlet输出的代码也和上面例子一样. 我看这段代码, 也没找到解决问题的方法,那位高手能指点指点呢?
   
0 请登录后投票
时间:2008-04-17
我的是网上最简单的jsp读取例子,如果用Ext.data.HttpProxy就不报错,用Ext.data.ScriptTagProxy 错误信息第2行,excepted ";",但是主要的是不管用那个都显示不出数据!!!我用的2.02版本
   
0 请登录后投票
时间:2008-04-17
告诉你:
所有文件 存为 utf-8格式
   
0 请登录后投票
时间:2008-04-18
crabboy 写道
告诉你:
所有文件 存为 utf-8格式

所有都存为utf=8了,还是不显示数据,还没有错误,我的后台数据是:
data.jsp
<body>
    <%
	String start = request.getParameter("start");
	String limit = request.getParameter("limit");
	try {
	    int index = Integer.parseInt(start);
	    int pageSize = Integer.parseInt(limit);
	
	    String json = "{totalProperty:100,root:[";
	    for (int i = index; i < pageSize + index; i++) {
	        json += "{id:'" + i + "',name:'name" + i + "',descn:'descn" + i + "'}";
	        if (i != pageSize + index - 1) {
	            json += ",";
	        }
	    }
	    json += "]}";
	    response.getWriter().write(json);
	    System.out.println("========="+json);
	} catch(Exception ex) {
	}
	%>
  </body>

grid.js
Ext.onReady(function() {

	var sm = new Ext.grid.CheckboxSelectionModel();
	
	var cm = new Ext.grid.ColumnModel([
		new Ext.grid.RowNumberer(),
		sm,
		{header:'编号',dataIndex:'id',width:40,sortable:true},
		{header:'名称',dataIndex:'name',width:40},
		{header:'描述',dataIndex:'descn',width:40}
	]);
	cm.defaultSortable = true; 
	
	var ds = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({ 
			url:'data.jsp' 
		}),
		reader: new Ext.data.JsonReader({
		    root: 'root',
		    totalProperty: 'totalProperty',
		    id: 'id',
		    fields: [ 'id','name','descn' ]
		})
		         
	});
	
	var grid = new Ext.grid.GridPanel({
		el: 'grid',
		ds: ds,
		cm: cm,
		sm: sm,
		width: 800,
		height: 300,  
	    loadMask: true,      
		bbar: new Ext.PagingToolbar({
			pageSize: 20,
			store: ds,
			displayInfo: true,
			displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
			emptyMsg: "没有记录"
		})
		
	});
	
	grid.render();
	ds.load({params:{start:0, limit:10}});	
	
});

grid.html
<html>
  <head>
    <title>grid.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="extjs/ext-base.js"></script>
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="js/grid.js"></script>
    
  </head>
  
  <body>
    <div id="grid" style="height:265px;"></div>
  </body>
</html>
   
0 请登录后投票
时间:2008-04-19
不管是用new Ext.data.ScriptTagProxy 还是其他的
确保后台能够取到start,limit,callback 参数
在json数据的前面加上 callback参数的值
格式是(c#) 代码
strToResponse = strCallback + "(" + json.ToString() + ")";
   
0 请登录后投票
论坛首页 AJAX版 EXT

跳转论坛:
JavaEye推荐