簡單的jqgrid示例無法加載數據

我是jqGrid的新手，我試圖做一個簡單的jqGrid工作。簡單的jqgrid示例無法加載數據

我從http://www.trirand.com/blog/jqgrid/jqgrid.html複製的代碼，並把它放在一個HTML文件，然後打開它與Firefox，但網格不能成功加載數據

下面是HTML：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/> 
    <link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/> 
    <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.js"></script> 
     <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script> 

     <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js"></script> 
     <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script> 
     <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js"></script> 
     <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script> 
     <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js"></script> 
     <script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js"></script> 
    </head> 
<body> 
    <table id="list2"> 
     </table><div id="pager2"></div> 
</body> 
<script type="text/javascript"> 
    jQuery("#list2").jqGrid({ 
    url:'http://www.trirand.com/blog/jqgrid/server.php?q=2', 
    datatype: "json", 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
     {name:'id',index:'id', width:55}, 
     {name:'invdate',index:'invdate', width:90}, 
     {name:'name',index:'name asc, invdate', width:100}, 
     {name:'amount',index:'amount', width:80, align:"right"}, 
     {name:'tax',index:'tax', width:80, align:"right"},  
     {name:'total',index:'total', width:80,align:"right"},  
     {name:'note',index:'note', width:150, sortable:false}  
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager2', 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"JSON Example" 
}); 
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); 

</script> 
</html>

來源

2012-06-14 yelu

當我把url放在瀏覽器中時，我可以得到正確的Json字符串，但是當html調用這個url並且我觀察到firebug中的響應時，響應內容不會在firebug中顯示，而響應內容的大小相同如直接調用 – yelu

你貼有很多問題的代碼。

第一個是你用的url:'http://www.trirand.com/blog/jqgrid/server.php?q=2'這就是錯了。您可以在Web瀏覽器中打開URL並查看結果，但由於重要的安全限制（如same origin policy），您無法在Ajax請求中使用它。 您只能從他自己的網站獲取JSON數據。因此，您可以將url:'http://www.trirand.com/blog/jqgrid/server.php?q=2'返回的數據保存在my.json之類的文件中，並使用url: 'my.json'。在這種情況下你的代碼將起作用。

接下來的問題是，您必須在<html>之前包含某種形式的<!DOCTYPE html ...聲明。這真的很重要！如果你不這樣做，那麼Web瀏覽器將嘗試在Internet Explorer瀏覽器中模擬IE5等非常老的瀏覽器的行爲。這種模式的名稱爲quirks mode。

接下來的問題是，你的代碼不包含任何HTML標準，因爲你在<body>之後包含<script>。我建議你在this one之類的HTML驗證器中驗證你的頁面。

將JavaScript代碼放在$(function(){/*place code here*/});的內部是一種很好的做法。有關更多詳細信息，請參見jQuery.ready。

來源

2012-06-14 10:23:28 Oleg

確實如此，但請參閱您提供的http鏈接中的'workarounds' ：//en.wikipedia。org/wiki/Same_origin_policy＃解決方法 –

@EricJ .:因爲人們可以使用JSONP（參見[the demo]（http://www.ok-soft-gmbh.com/jqGrid/google-tables3.htm）[the答案]（http://stackoverflow.com/a/4326986/315935）或[演示]（http://www.ok-soft-gmbh.com/jqGrid/user781065_jsonp.htm）from [另一個答案]（http ：//stackoverflow.com/a/9588051/315935））。它通常在jqGrid中得到支持，但獲取數據的網站也應該支持JSONP。在問題1中，只需從原始jqGrid演示頁面獲取完整代碼，並嘗試從頁面獲取數據。所以用戶只需要瞭解如何使用jqGrid。這是他的第一步。 – Oleg

我同意。我爲其他可能遇到此問題的人添加了評論，以澄清一般情況下，可以解決同一起源問題。 –

的URL您呼叫

http://www.trirand.com/blog/jqgrid/server.php?q=2

返回錯誤：

Warning: Division by zero in /home/trirand/public_html/blog/jqgrid/server.php on line 145 Could not execute query.You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

你需要獲取數據的查詢工作第一:-)

這可能也是值得的負載處理錯誤，這樣如果出現問題可以顯示出有意義的錯誤消息。有一個充分的討論在這裏：

How can I get JQGrid to recognize server sent Errors?

來源

2012-06-14 03:12:59

當html運行時，它實際上調用此URL http://www.trirand.com/blog/jqgrid/server.php?q=2&_search=false&nd=1339643709675&rows=10&page=1&sidx=id&sord=desc – yelu

此網址可以返回正確的Json字符串 – yelu

@yelu：您無法「通過」每個Ajax調用[url]（http://www.trirand.com/blog/jqgrid/server.php?q=2&_search=false&nd=1339643709675&rows=10&page = 1＆sidx = id＆sord = desc）從另一個網站http://www.trirand.com。這是Ajax的[安全限制]（http://en.wikipedia.org/wiki/Same_origin_policy）。我建議你在所有網格中實現'loadError'回調（詳情請參見[這裏]（http://stackoverflow.com/a/6969114/315935）） – Oleg

簡單的jqgrid示例無法加載數據

回答

相關問題