jqGrid未使用来自Java Servlet的JSON数据填充_Java_Json_Servlets_Jqgrid

jqGrid未使用来自Java Servlet的JSON数据填充

java json servlets jqgrid

jqGrid未使用来自Java Servlet的JSON数据填充,java,json,servlets,jqgrid,Java,Json,Servlets,Jqgrid,希望有人能给我指出正确的方向我已经浏览了许多其他与jqGrid和json相关的帖子，这些帖子没有填充jqGrid表（一些链接）：但却找不到我问题的答案基本上，我试图做的是从日志文件中读取事件列表（带有日期和时间信息）并显示在jqGrid中这是我的设置： [1] 我的Servlet片段 @Override protected void doGet(HttpServletRequest aRequest, HttpServletResponse a

希望有人能给我指出正确的方向

我已经浏览了许多其他与jqGrid和json相关的帖子，这些帖子没有填充jqGrid表（一些链接）：

但却找不到我问题的答案

基本上，我试图做的是从日志文件中读取事件列表（带有日期和时间信息）并显示在jqGrid中

这是我的设置：

[1] 我的Servlet片段


@Override
    protected void doGet(HttpServletRequest aRequest,
            HttpServletResponse aResponse, Hashtable aQueryData,
            LocaleData aLocale) throws ServletException, IOException {

        System.out.println("doGet(): Received Request: " + aRequest.getServletPath());

        // jqGrid expects the JSON data in a predefined format:
        //      { 
        //            "total": "xxx", 
        //            "page": "yyy", 
        //            "records": "zzz",
        //            "rows" : [
        //              {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
        //              {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
        //                ...
        //            ]
        //      }


        // Calling getLogEntries() method populates logEntries & logEntriesCnt.
        // logEntries contains the "rows" data as specified above.
            // For now I am testing with 10 rows of data.
        getLogEntries(aLocale);

        JSONObject jqGridData = new JSONObject();
        jqGridData.put("total", "1");
        jqGridData.put("page", "1");
        jqGridData.put("records", String.valueOf(logEntriesCnt-1));
        jqGridData.put("rows", logEntries);

        System.out.println("\n\n# Event Log Entries (" + new Date() + "):" + (logEntriesCnt-1));
        System.out.println("jqGrid JSON: \n" + jqGridData.toJSONString());

        aRequest.setAttribute("userdata", jqGridData.toJSONString());

        aRequest.getRequestDispatcher("/jsp/eventlogtest.jsp").forward(aRequest, aResponse);
    }

# Event Log Entries (Fri Dec 09 11:02:25 GMT 2011):10
jqGrid JSON: 
{"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"4","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:30:58","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:21:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:21:58","Monitoring Started"]}]}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta http-equiv="Content-Type" content="application/json">

  <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css">
  <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css">

  <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script>

  <script type="text/javascript" src="/js/grid.locale-en.js"></script>
  <script type="text/javascript" src="/js/jquery.jqGrid.min.js"></script>

  <script type="text/javascript" src="/js/eventlog.min.js"></script>  

  <title>jqGrid Test</title>
</head>
<body>
    <h1>jqGrid Test</h1>

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post">

        <div id="logEntries">
            userdata = ${userdata}
        </div>

        <br/>
        <br/>

        <table id="tableGrid"></table>
        <div id="tablePager"></div>

        <br/>
        <br/>

    </form>
</body>
</html>

控制台上的输出（我通过jsonlint验证）：


@Override
    protected void doGet(HttpServletRequest aRequest,
            HttpServletResponse aResponse, Hashtable aQueryData,
            LocaleData aLocale) throws ServletException, IOException {

        System.out.println("doGet(): Received Request: " + aRequest.getServletPath());

        // jqGrid expects the JSON data in a predefined format:
        //      { 
        //            "total": "xxx", 
        //            "page": "yyy", 
        //            "records": "zzz",
        //            "rows" : [
        //              {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
        //              {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
        //                ...
        //            ]
        //      }


        // Calling getLogEntries() method populates logEntries & logEntriesCnt.
        // logEntries contains the "rows" data as specified above.
            // For now I am testing with 10 rows of data.
        getLogEntries(aLocale);

        JSONObject jqGridData = new JSONObject();
        jqGridData.put("total", "1");
        jqGridData.put("page", "1");
        jqGridData.put("records", String.valueOf(logEntriesCnt-1));
        jqGridData.put("rows", logEntries);

        System.out.println("\n\n# Event Log Entries (" + new Date() + "):" + (logEntriesCnt-1));
        System.out.println("jqGrid JSON: \n" + jqGridData.toJSONString());

        aRequest.setAttribute("userdata", jqGridData.toJSONString());

        aRequest.getRequestDispatcher("/jsp/eventlogtest.jsp").forward(aRequest, aResponse);
    }

# Event Log Entries (Fri Dec 09 11:02:25 GMT 2011):10
jqGrid JSON: 
{"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"4","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:30:58","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:21:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:21:58","Monitoring Started"]}]}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta http-equiv="Content-Type" content="application/json">

  <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css">
  <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css">

  <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script>

  <script type="text/javascript" src="/js/grid.locale-en.js"></script>
  <script type="text/javascript" src="/js/jquery.jqGrid.min.js"></script>

  <script type="text/javascript" src="/js/eventlog.min.js"></script>  

  <title>jqGrid Test</title>
</head>
<body>
    <h1>jqGrid Test</h1>

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post">

        <div id="logEntries">
            userdata = ${userdata}
        </div>

        <br/>
        <br/>

        <table id="tableGrid"></table>
        <div id="tablePager"></div>

        <br/>
        <br/>

    </form>
</body>
</html>

[2] 我的JSP


@Override
    protected void doGet(HttpServletRequest aRequest,
            HttpServletResponse aResponse, Hashtable aQueryData,
            LocaleData aLocale) throws ServletException, IOException {

        System.out.println("doGet(): Received Request: " + aRequest.getServletPath());

        // jqGrid expects the JSON data in a predefined format:
        //      { 
        //            "total": "xxx", 
        //            "page": "yyy", 
        //            "records": "zzz",
        //            "rows" : [
        //              {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
        //              {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
        //                ...
        //            ]
        //      }


        // Calling getLogEntries() method populates logEntries & logEntriesCnt.
        // logEntries contains the "rows" data as specified above.
            // For now I am testing with 10 rows of data.
        getLogEntries(aLocale);

        JSONObject jqGridData = new JSONObject();
        jqGridData.put("total", "1");
        jqGridData.put("page", "1");
        jqGridData.put("records", String.valueOf(logEntriesCnt-1));
        jqGridData.put("rows", logEntries);

        System.out.println("\n\n# Event Log Entries (" + new Date() + "):" + (logEntriesCnt-1));
        System.out.println("jqGrid JSON: \n" + jqGridData.toJSONString());

        aRequest.setAttribute("userdata", jqGridData.toJSONString());

        aRequest.getRequestDispatcher("/jsp/eventlogtest.jsp").forward(aRequest, aResponse);
    }

# Event Log Entries (Fri Dec 09 11:02:25 GMT 2011):10
jqGrid JSON: 
{"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"4","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:30:58","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:21:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:21:58","Monitoring Started"]}]}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta http-equiv="Content-Type" content="application/json">

  <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css">
  <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css">

  <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script>

  <script type="text/javascript" src="/js/grid.locale-en.js"></script>
  <script type="text/javascript" src="/js/jquery.jqGrid.min.js"></script>

  <script type="text/javascript" src="/js/eventlog.min.js"></script>  

  <title>jqGrid Test</title>
</head>
<body>
    <h1>jqGrid Test</h1>

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post">

        <div id="logEntries">
            userdata = ${userdata}
        </div>

        <br/>
        <br/>

        <table id="tableGrid"></table>
        <div id="tablePager"></div>

        <br/>
        <br/>

    </form>
</body>
</html>

Firebug控制台-响应：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta http-equiv="Content-Type" content="application/json">

  <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css">
  <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css">

  <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script>

  <script type="text/javascript" src="/js/grid.locale-en.js"></script>
  <script type="text/javascript" src="/js/jquery.jqGrid.min.js"></script>

  <script type="text/javascript" src="/js/eventlog.min.js"></script>  

  <title>jqGrid Test</title>
</head>
<body>
    <h1>jqGrid Test</h1>

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post">

        <div id="logEntries">
            userdata = {"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:18:13","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:18:13","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"4","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:30:58","Monitoring Started"]}]}
        </div>

        <br/>
        <br/>

        <table id="tableGrid"></table>
        <div id="tablePager"></div>

        <br/>
        <br/>

    </form>
</body>
</html>

[3] 我的JavaScript：
$(document).ready(function(){

    // Test Data: All entries double quoted
    var userdatatest1 = 
        {
            "total":"1",
            "page":"1",
            "records":"10",
            "rows":[
            {"id":"1","cell":["08\/12\/11","21:09:19","Communication Established"]},
            {"id":"2","cell":["08\/12\/11","21:09:19","Monitoring Started"]},
            {"id":"3","cell":["08\/12\/11","21:02:47","Communication Established"]},
            {"id":"4","cell":["08\/12\/11","21:02:47","Monitoring Started"]},
            {"id":"5","cell":["08\/12\/11","20:51:40","Communication Established"]},
            {"id":"6","cell":["08\/12\/11","20:51:40","Monitoring Started"]},
            {"id":"7","cell":["08\/12\/11","20:33:24","Communication Established"]},
            {"id":"8","cell":["08\/12\/11","20:33:24","Monitoring Started"]},
            {"id":"9","cell":["08\/12\/11","20:23:06","Communication Established"]},
            {"id":"10","cell":["08\/12\/11","20:23:06","Monitoring Started"]}]
        };


    // jqGrid Options: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
    // Pager Options: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
    $("#tableGrid").jqGrid({
        url:'/eventlogjqgrid',
        datatype:'jsonstring',
        //datastr: userdatatest1,
        colNames:['Date', 'Time', 'Event'],
        colModel:[ 
                {name:'dateentry',index:'dateentry',width:150,align:"left",sortable:false,editable:false}, 
                {name:'timeentry',index:'timeentry',width:150,align:"left",sortable:false,editable:false} ,
                {name:'evententry',index:'evententry',width:400,align:"left",sortable:false,editable:false}
        ],
        rowNum:10,
        rowList:[10,20,30],
        sortname:'dateentry',
        sortorder:'asc',
        pager: jQuery('#tablePager'),
        viewrecords: true,
        caption: 'Event Log'
    }); 

    jQuery("#tableGrid").jqGrid('navGrid', '#tablePager', {edit:false, add:false, del:false, search:false, refresh:false});

});

$（文档）.ready（函数（）{ //测试数据：所有条目双引号 var userdatatest1= { “总计”：“1”， “第页”：“1”， “记录”：“10”， “行”：[ {“id”：“1”，“cell”：[“08\/12\/11”，“21:09:19”，“通信已建立”]}， {“id”：“2”，“单元格”：[“08\/12\/11”，“21:09:19”，“监视已开始”]}， {“id”：“3”，“cell”：[“08\/12\/11”，“21:02:47”，“通信已建立”]}， {“id”：“4”，“cell”：[“08\/12\/11”，“21:02:47”，“监视已开始”]， {“id”：“5”，“cell”：[“08\/12\/11”，“20:51:40”，“通信已建立]， {“id”：“6”，“cell”：[“08\/12\/11”，“20:51:40”，“监视已开始”]， {“id”：“7”，“cell”：[“08\/12\/11”，“20:33:24”，“通信已建立”]}， {“id”：“8”，“cell”：[“08\/12\/11”，“20:33:24”，“监视已开始”]， {“id”：“9”，“cell”：[“08\/12\/11”，“20:23:06”，“通信已建立]， {“id”：“10”，“单元格”：[“08\/12\/11”，“20:23:06”，“监视已开始”]}] }; //jqGrid选项：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options //寻呼机选项：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager $（“#tableGrid”）.jqGrid({ url:“/eventlogjqgrid”，数据类型：'jsonstring'， //datastr:userdatatest1， colNames:[“日期”、“时间”、“事件”]， colModel:[ {名称：'dateentry'，索引：'dateentry'，宽度：150，对齐：“左”，可排序：false，可编辑：false}， {name:'timeentry'，index:'timeentry'，width:150，align:“left”，sortable:false，editable:false}， {名称：'evententry'，索引：'evententry'，宽度：400，对齐：“左”，可排序：false，可编辑：false} ], rowNum:10，行列表：[10,20,30]， sortname:'dateentry'，排序器：'asc'， pager:jQuery（“#tablePager”）， viewrecords：是的，标题：“事件日志” }); jQuery（#tableGrid”）.jqGrid（'navGrid'，'#tablePager'，{edit:false，add:false，del:false，search:false，refresh:false}）； });

从我的Javascript中可以看到。我有与服务器发送的json相对应的测试json数据。呈现测试数据没有问题（请参见屏幕截图）：

我真的不介意能够分页表中的数据。我只想能够显示数据，并每5分钟更新一次。我将在获得要显示的基本数据后进行更新

谢谢你的帮助。

提前感谢。

如果您将需要用于填充网格的数据直接放在HTML页面上，则不应使用

<div id="logEntries">
    userdata = ${userdata}
</div>

语句

var mygriddata={“total”：“1”，“page”：“1”，…}

直接定义对象而不是字符串。因此，您可以按照JavaScript语法将代码重写为

<script type="text/javascript">
    var mygriddata = {
        total: "1",
        page: "1"//, ...
    };
</script>

如果您想使用

数据类型：'json'

并根据Ajax从servlet获取json数据，服务器代码不应该写入服务器响应的正确主体

HttpServletResponse

，而是至少将响应头的

内容类型设置为application/json
：
aResponse.setContentType("application/json");

我不使用Java，因此我无法在服务器代码方面为您提供更多帮助。
Hi@Oleg-非常感谢您的快速响应。关于你的回答，我只想说几句。我只在JSP userdata=${userdata}中包含以下内容sure@adrnola：好的，userdata=${userdata}
的含义对我来说并不清楚。无论如何，在使用Firebug的过程中，您不仅应该查看主体，还应该查看HTTP头。尤其是“内容类型”非常重要。我建议您在网格中添加loadError
handle以查看可能的错误。请查看详细信息。