jqGrid成功调用restful服务但无法显示jqGrid ui

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jqGrid成功调用restful服务但无法显示jqGrid ui相关的知识,希望对你有一定的参考价值。

这是RESTful数据格式

{"user":[
           {"id":"aupres","passwd":"aaa","age":45,"name":"father"},
           {"id":"hwa5383","passwd":"bbb","age":40,"name":"mother"},
           {"id":"julian","passwd":"ccc","age":15,"name":"son"}

]}

我的jqGrid客户端成功调用上述数据。下图显示了结果:

enter image description here

但是这段代码无法显示对jqGrid的响应。这是我的客户端代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="EUC-KR">
    <title>jqGrid Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css"/>
    <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="jquery.jqGrid.min.js"></script>
    </head>
    <body>
    <table id="grid"></table>
    <div id="pager"></div>
    <script type="text/javascript">
    $(document).ready(function(){

       $Grid = $("#grid");
       $Grid.jqGrid({

          mtype: "get",
          url: "/JQueryJsonWeb/rest/services/getJson/aupres",
          contentType: "text/json; charset=utf-8",
          dataType: "json",

          jsonReader : {
             root : "user"
          },
          colNames : [
             'id',
             'passwd',
             'age',
             'name'
          ],
          colModel : [
             { name : 'id',        width:40,  align:'center'},
             { name : 'passwd',    width:80,  align:'left'  },
             { name : 'age',       width:80,  align:'left'  },
             { name : 'name',      width:80,  align:'right' }
          ],
          pager : '#pager',
          rowNum : '10',

          loadComplete : onloadComplete,
          loadError : onloadError,
          gridComplete : ongridComplete
       });  

       function onloadComplete(jsonData, status) {
          console.log(jsonData) **// This method shows the above image.**
       }

       function onloadError(status) {
          console.log(status)
       }

       function ongridComplete() {
          console.log("fiished!!!");
       }
    });
    </script>
    </body>
    </html>
答案

请阅读the comment到您之前的问题:

  • JavaScript是区分大小写的语言。没有dataType: "json"参数,将使用默认的datatype: "xml"
  • 不存在的参数contentType也将被忽略。如果将其解释为XML数据,则返回错误。
  • 你包含的输出来自onloadError而不是来自onloadCompleteonloadError的参数是jqXHRtextStatuserrorThrown。你包括了jqXHR对象的控制台输出。见the answer
  • 您应该在JavaScript中声明变量:使用var $Grid = $("#grid");而不是$Grid = $("#grid");。在顶部函数的开头包含"use strict"指令有助于检测此类错误(请参阅here)。同样地,我建议你在每个语句后加上分号(参见console.log(status)console.log(jsonData))。
  • 你应该在你的所有问题中包括你使用的jqGrid版本以及哪个fork(free jqGrid - 我的fork,商业Guriddo jqGrid JS或版本<= 4.7中的旧jqGrid)。叉子的可能性将越来越不同。因此,使用(或可以使用)哪一个很重要。

以上是关于jqGrid成功调用restful服务但无法显示jqGrid ui的主要内容,如果未能解决你的问题,请参考以下文章

为啥 JQGrid 无法显示数据?

无法使用新的json数据重新加载JQGrid

成功测试后,Chrome 中未显示 RESTful 响应

arcgis server 发布GP服务,管理页面里显示发布成功,也生成了WSDL文件,但只无法访问

JQuery $.ajax 成功数据始终为空

使用Free jqGrid 4.15,无法过滤false的复选框