jqgrid无法读取带有错误的json

The jqgrid cannot read the json with the error

本文关键字:有错误 json 读取 jqgrid      更新时间:2023-09-26

我是jqgrid和javascript的新手。我需要开发一个用于从数据库加载数据的jqgrid。但是,它似乎不工作,我找不到问题的错误....请帮帮我吧,请....

在index . jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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="text/html; charset=ISO-8859-1">
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
    <script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
      <script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>

<title>Next page</title>
<script type="text/javascript">
$(document).ready(function(){
        jQuery('#list10').jqGrid({
            url:'griddata.jsp',
            mtype:'POST',
            datatype: 'json',
        colNames:['Inv No','Date', 'Client'],
            colModel:[{name:'id',index:'id', width:55},{name:'invdate',index:'invdate', width:90},{name:'name',index:'name', width:1000}],

        rowNum:10,
        pager: '#pager10',
        sortname: 'id',
        viewrecords: true,   
        multiselect: false,
        jsonReader : {
            root: 'rows',
            page: 'page',
            total: 'total',
            records: 'records',
        },
        loadComplete: function () {
            alert('OK');
        },
        loadError: function (jqXHR, textStatus, errorThrown,error) {
            alert('HTTP status code: ' + jqXHR.status + ''n' +
                    'textStatus: ' + textStatus + ''n' +
                    'error: ' + error + ''n' +
                  'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + ''n' + jqXHR.responseText);
        },
        caption: 'abc'
             });
        jQuery('#list10').jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});

         }//function
        );//ready
        </script>
</head>
<body>

<table id="list10"></table>
<div id="pager10"></div>
<table id="list10_d"></table>
<div id="pager10_d"></div>
</body>
</html> 
在griddate.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%@ page import="java.io.FileWriter" %>
<%@ page import="java.io.IOException" %>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>
<%@ page import="java.io.FileNotFoundException" %>
<%@ page import="java.io.FileReader" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="org.json.simple.parser.JSONParser" %>
<%@ page import="org.json.simple.parser.ParseException" %>
<%@ page import = "org.json.*" %>

<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%
        String rows=request.getParameter("rows");
        String pageno=request.getParameter("page");
        String cpage=pageno;
        Connection connect = null;
        Statement statement = null;
        PreparedStatement preparedStatement = null;
        ResultSet rs= null;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/emstest?user=root&password=000000");
        statement = connect.createStatement();
        rs = statement.executeQuery("SELECT account_id, account_number, rec_create_id FROM tbl_account");
    //System.out.print(rs);
        int count=0;
        rs.last();
        count=rs.getRow(); 
        int  pageval=0;
        pageval=(count/Integer.parseInt(rows));
        int limitstart=0;
        limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
        int total=count/Integer.parseInt(rows);
        String totalrow=String.valueOf(total+1);
        rs = statement.executeQuery("SELECT account_id, account_number, rec_create_id FROM tbl_account limit "+limitstart+","+rows);  

        JSONObject responcedata=new JSONObject();
        net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();
         responcedata.put("total",totalrow);
        responcedata.put("page",cpage);
        responcedata.put("records",count);
        net.sf.json.JSONArray cell=new net.sf.json.JSONArray();
        net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();
        int i=1;
       while(rs.next())
           {
                cellobj.put("id",rs.getString(1));
                cell.add(rs.getString(1));
                cell.add(rs.getString(2));
                cell.add(rs.getString(3));
        cellobj.put("cell",cell);
        cell.clear();
        cellarray.add(cellobj);
        i++;
       }
        responcedata.put("rows",cellarray);
        out.println(responcedata);
        System.out.println(responcedata);

%>

</body>
</html>

来自griddate.jsp的json

{"total":"1","page":"1","records":7,"rows":[{"id":"41","cell":["41","GD20131109","admin123"]},{"id":"42","cell":["42","ZH20131109","admin123"]},{"id":"43","cell":["43","NT001","admin123"]},{"id":"44","cell":["44","987654","admin123"]},{"id":"45","cell":["45","testing feb","admin123"]},{"id":"46","cell":["46","GD20131111","admin123"]},{"id":"47","cell":["47","ZH135421","admin123"]}]}

我得到了这些错误信息(我不能张贴图片…)

1)

HTTP status code:200
textStatus: parsererror

2)

HTTP message body(jqXHR.responseText):
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
{"total":"1","page":"1","records":7,"rows":[{"id":"41","cell":["41","GD20131109","admin123"]},{"id":"42","cell":["42","ZH20131109","admin123"]},{"id":"43","cell":["43","NT001","admin123"]},{"id":"44","cell":["44","987654","admin123"]},{"id":"45","cell":["45","testing feb","admin123"]},{"id":"46","cell":["46","GD20131111","admin123"]},{"id":"47","cell":["47","ZH135421","admin123"]}]}
</body>
</html>

您需要在HTTP服务器响应中返回原始 JSON数据。数据不能在HTML页面的<body>内。HTTP响应应该将ContentType头设置为application/json。我不是Java开发人员,但在互联网上简单搜索可以显示您使用org.json.JSONObject例如生成(参见Page2.jsp的代码从问题和相应的答案)。