【发布时间】：2014-03-13 03:44:25
【问题描述】：
我是 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>
【问题讨论】：
标签： javascript jquery json jsp jqgrid