標題: [問題]jQuery.getJSON 的用法(已解決) [打印本頁]
作者: xxoxxoxxoxx 時間: 2009-10-20 19:34 標題: [問題]jQuery.getJSON 的用法(已解決)
大大不好意思，小弟又遇到困難了
...
json格式搞懂了，但在jquery該如何寫呢?
例如：
{
"column":["a","b","c"],
"data": [
{"a": "aaa", "b": "bbb", "c": "ccc" },
{"a": "aaaa", "b": "bbbb", "c":"cccc" },
{"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
]
}
該如何從jquery印出一個表格，首欄(TH)為「a、b、c」
第二欄開始(TD)為資料
用append()好像是一直加上去，會無法正常顯示
不知道要如何寫呢@_@
$(function(){
$.getJSON("data.php", function(json){
$("#content").html("<table><tr>");
for(var i=0;i<json.column.length;i++){
$("#content").append("<th>"+ json.column +"</th>");
}
$("#content").append("</tr><tr>");
for(var y=0;y<json.data.length;y++){
$("#content").append("<td>"+ json.data[y].a +"</td>");
$("#content").append("<td>"+ json.data[y].b +"</td>");
$("#content").append("<td>"+ json.data[y].c +"</td>");
}
$("#content").append("</tr></table>");
});
});
[ 本帖最後由 xxoxxoxxoxx 於 2009-10-23 14:10 編輯 ]
作者: wmh 時間: 2009-10-20 21:05
getJSON() 顧名思義就是用來取得 JSON 格式的資料，你可以瞭解一下什麼是 JSON，怎麼用 JavaScript 去操作等等。
範例：
var j = [{name:"aa", text:"hello"},{name:"bb", text:"world"}];
alert(j[0]['name']); //aa
alert(j[0]['text']); //hello
alert(j[1]['name']); //bb
alert(j[1]['text']); //world
//對 j[0] 進行 loop 取值，idx 是 key (或稱 index)
for (var idx in j[0]) {
alert(idx); //第一次是 name, 第二次是 text
alert(j[0][idx]); //第一次是 aa, 第二次是 hello}
作者: xxoxxoxxoxx 時間: 2009-10-21 09:46
感謝大大的回答，小弟又上了一課
作者: xxoxxoxxoxx 時間: 2009-10-22 10:31
已解決，自刪
抱歉
[ 本帖最後由 xxoxxoxxoxx 於 2009-10-22 14:13 編輯 ]
作者: wmh 時間: 2009-10-22 13:36
搜尋一下 JSON 應該可以找到很多喔。基本上 [] 包起來的東西是 Array，{} 包起來的東西是 Object，或是 PHP 裡面的關聯式陣列。
舉例來說:
[1, 5, 9, 2] 相當於 PHP 的 Array:
array(1, 5, 9, 2)
[{a:1}, {b: 5}, {c: 9}, {d: 2}] 相當於 PHP 的 Array:
array(
'a': 1,
'b': 5,
'c': 9,
'd': 2,
)
所以該如何設定就看你自己啦～
作者: xxoxxoxxoxx 時間: 2009-10-22 14:14
原帖由 wmh 於 2009-10-22 13:36 發表 
搜尋一下 JSON 應該可以找到很多喔。基本上 [] 包起來的東西是 Array，{} 包起來的東西是 Object，或是 PHP 裡面的關聯式陣列。
舉例來說:
[1, 5, 9, 2] 相當於 PHP 的 Array:
array(1, 5, 9, 2)
[{a:1}, {b: 5}, ...
感謝大大回覆，小弟找到教學了，正把問題刪掉而已，大大就回覆了
太感謝了，辛苦了
作者: xxoxxoxxoxx 時間: 2009-10-22 17:10
合併原po
[ 本帖最後由 xxoxxoxxoxx 於 2009-10-22 17:59 編輯 ]
作者: wmh 時間: 2009-10-23 09:48
不用修改原 po 啦，可以直接回覆一篇新的或另 po 都可以，這樣如果有其他人看到才不會看不懂。
我建議你先用 JavaScript 的 Array 存放你要組的 table 字串，最後用 join() 合成字串後再用 $("#content").html() 把值給放入，這樣效能會比較好。先試試看吧，有問題再提出囉。
作者: xxoxxoxxoxx 時間: 2009-10-23 11:13
感謝大大回復，小弟再研究看看好了
我想說合併原po比較不會浪費資源，想說是相關問題
呵呵，感謝大大回覆
我有看到xml的方式，還在研究適不適用於json
xml
<?xml version="1.0" encoding="UTF-8"?>
<bestsellers>
<book>
<title>Shadow Dance: A Novel</title>
<author>Julie Garwood</author>
<publisher>Ballantine Books</publisher>
<isbn>0345453867</isbn>
</book>
<book>
<title>Exile: A Novel</title>
<author>Richard North Patterson</author>
<publisher>Henry Holt and Co.</publisher>
<isbn>0805079475</isbn>
</book>
</bestsellers>
jquery script
$(document).ready(function(){
$().ajaxStart(function() {
$("#loading").show();
});
$().ajaxComplete(function() {
$("#loading").hide();
});
$.ajax({
url: "books1.xml",
type: "GET",
cache: false,
dataType: "xml",
error: function() {
alert("Failed to Load");
},
success: function(xml){
$('#maintable').append('<tr class=title><td>NO</td><td>Title</td><td>Author</td><td>
ublisher</td><td>ISBN</td></tr>');
$('book',xml).each(function(e){
var mytitle="";
var myauthor="";
var mypublisher="";
var myisbn="";
mytitle=$('title',this).text();
mytitle=$.trim(mytitle);
myauthor=$('author',this).text();
myauthor=$.trim(myauthor);
mypublisher=$('publisher',this).text();
mypublisher=$.trim(mypublisher);
myisbn=$('isbn',this).text();
myisbn=$.trim(myisbn);
f=e+1;
$('#maintable').append('<tr id='+e+' align=left></tr>');
$('<td></td>').append(f+'.').appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(mytitle).appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(myauthor).appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(mypublisher).appendTo('#maintable tr[id='+e+']');
$('<td></td>').append(myisbn).appendTo('#maintable tr[id='+e+']');
$("tr:gt(0):even").addClass('myeven');
$("tr:gt(0)
dd").addClass('myodd');
});
}
});
});
body html
<table border=0 id=maintable cellspacing="0" cellpadding="5" ></table>
[ 本帖最後由 xxoxxoxxoxx 於 2009-10-23 11:15 編輯 ]
作者: wmh 時間: 2009-10-23 12:29
嗯，以 AJAX 資料傳輸的角度來看，使用 JSON 和 XML 的差異不大，就看你想選哪一種囉。
作者: xxoxxoxxoxx 時間: 2009-10-23 12:49
感謝大大，我依xml的方式研究出json的方法了
只是不知道這樣寫好不好
再麻煩大大幫我看一下
以下：
----------------------------------------
test.json
{
"column":["a","b","c"],
"data": [
{"a": "aaa", "b": "bbb", "c": "ccc" },
{"a": "aaaa", "b": "bbbb", "c":"cccc" },
{"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
]
}
jquery script
<script type="text/javascript">
$(function(){
$.getJSON("test.json", function(json){
//在maintable裡面增加id為title的<tr>
$('#maintable').append('<tr id=title></tr>');
for(var i=0;i<json.column.length;i++){
//抓取json裡column欄位的資料寫入td，並依附id為title的tr
$('<td></td>').append(json.column).appendTo('#maintable tr[id=title]');
}
//依data資料的數量，跑迴圈
for(var y=0;y<json.data.length;y++){
var name = "mycol";
var a = json.data[y].a;
var b = json.data[y].b;
var c = json.data[y].c;
//在maintable再增加一列tr，並名為name_y(以識別每列tr名稱)
$('#maintable').append('<tr id=' + name + "_" + y + '></tr>');
//抓取json裡data欄位的資料寫入td，並依附id為各name_y的tr
$('<td></td>').append(a).appendTo('#maintable tr[id='+ name + "_" + y +']');
$('<td></td>').append(b).appendTo('#maintable tr[id='+ name + "_" + y +']');
$('<td></td>').append(c).appendTo('#maintable tr[id='+ name + "_" + y +']');
}
});
});
</script>
body
<table border=0 id="maintable" cellspacing="0" cellpadding="5" ></table>
結果：| a | b | c |
| aaa | bbb | ccc |
| aaaa | bbbb | cccc |
| aaaaa | bbbbb | ccccc
|
[ 本帖最後由 xxoxxoxxoxx 於 2009-10-23 14:09 編輯 ]
作者: wmh 時間: 2009-10-24 09:07
不錯喔，自己寫出來總是比較有成就感而且可以比較踏實學到東西。
不過你用的 append 和 jQuery 的 selector 太頻繁，效能比較不是那麼好，如果先把 html 組起來，一次 append 會比較好，而且字串的組合要用來 array 操作，效能會更好。
$(function(){
$.getJSON("test.json", function(json){
var html = [];
//在maintable裡面增加id為title的<tr>
html.push('<tr id=title>');
for (var i=0; i<json.column.length; i++) {
//抓取json裡column欄位的資料寫入td，並依附id為title的tr
html.push('<td>', json.column, '</td>');
}
html.push('</tr>');
//依data資料的數量，跑迴圈
for (var y=0; y<json.data.length; y++) {
var name = "mycol";
var a = json.data[y].a;
var b = json.data[y].b;
var c = json.data[y].c;
//在maintable再增加一列tr，並名為name_y(以識別每列tr名稱)
html.push('<tr id=', name, "_", y, '>');
//抓取json裡data欄位的資料寫入td，並依附id為各name_y的tr
html.push('<td>', a,'</td><td>', b,'</td><td>', c,'</td>');
html.push('</tr>');
}
$('#maintable').append(html.join(''));
});
});
作者: xxoxxoxxoxx 時間: 2009-10-26 11:15 標題: 回復 11# 的帖子
感謝大大回覆，先將字串寫入一個變數再印出
筆數多起來，效能真的好很多耶
感謝大大
另外請問大大，小弟寫的json格資資料這樣合適嗎?
我本來寫一欄為column的資料，想說可以用迴圈來宣告資料
但好像沒辦法，變成a,b,c還是要再單獨宣告一次
所以我寫"column":["a","b","c"],這一欄資料是不是無意義
直接寫這樣就好了?
{
"data": [
{"a": "aaa", "b": "bbb", "c": "ccc" },
{"a": "aaaa", "b": "bbbb", "c":"cccc" },
{"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
]
}
[ 本帖最後由 xxoxxoxxoxx 於 2009-10-26 11:19 編輯 ]
作者: wmh 時間: 2009-10-27 09:26
欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題：[
["aaa", "bbb", "ccc"],
["aaaa", "bbbb", "cccc"],
["aaaaa", "bbbbb", "ccccc"]
]
作者: xxoxxoxxoxx 時間: 2009-10-27 09:55
原帖由 wmh 於 2009-10-27 09:26 發表
欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題
嗯!!小弟了解了，感謝大大^^
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|