[問題]jQuery.getJSON 的用法(已解決)(頁 1) - JavaScript 討論 - jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

xxoxxoxxoxx 發表於 2009-10-20 19:34

[問題]jQuery.getJSON 的用法(已解決)

大大不好意思，小弟又遇到困難了:'( ...

json格式搞懂了，但在jquery該如何寫呢?

例如：
[quote]{
"column":["a","b","c"],
"data": [
{"a": "aaa", "b": "bbb", "c": "ccc" },
{"a": "aaaa", "b": "bbbb", "c":"cccc" },
{"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
]
}[/quote]

該如何從jquery印出一個表格，首欄(TH)為「a、b、c」
第二欄開始(TD)為資料
用append()好像是一直加上去，會無法正常顯示
不知道要如何寫呢@_@
[quote]
$(function(){

$.getJSON("data.php", function(json){
$("#content").html("<table><tr>");
for(var i=0;i<json.column.length;i++){
$("#content").append("<th>"+ json.column[i] +"</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>");

});
}); [/quote]

[[i] 本帖最後由 xxoxxoxxoxx 於 2009-10-23 14:10 編輯 [/i]]

wmh 發表於 2009-10-20 21:05

getJSON() 顧名思義就是用來取得 JSON 格式的資料，你可以瞭解一下什麼是 JSON，怎麼用 JavaScript 去操作等等。

範例：
[code js]
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}
[/code]

xxoxxoxxoxx 發表於 2009-10-21 09:46

感謝大大的回答，小弟又上了一課:lol

xxoxxoxxoxx 發表於 2009-10-22 10:31

已解決，自刪

抱歉:lol

[[i] 本帖最後由 xxoxxoxxoxx 於 2009-10-22 14:13 編輯 [/i]]

wmh 發表於 2009-10-22 13:36

搜尋一下 JSON 應該可以找到很多喔。基本上 [] 包起來的東西是 Array，{} 包起來的東西是 Object，或是 PHP 裡面的關聯式陣列。

舉例來說:

[1, 5, 9, 2] 相當於 PHP 的 Array:
[code php]
array(1, 5, 9, 2)
[/code]

[{a:1}, {b: 5}, {c: 9}, {d: 2}] 相當於 PHP 的 Array:
[code php]
array(
  'a': 1,
  'b': 5,
  'c': 9,
  'd': 2,
)
[/code]

所以該如何設定就看你自己啦～

xxoxxoxxoxx 發表於 2009-10-22 14:14

[quote]原帖由 [i]wmh[/i] 於 2009-10-22 13:36 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=847&ptid=303][img]http://jsgears.com/images/common/back.gif[/img][/url]
搜尋一下 JSON 應該可以找到很多喔。基本上 [] 包起來的東西是 Array，{} 包起來的東西是 Object，或是 PHP 裡面的關聯式陣列。

舉例來說:

[1, 5, 9, 2] 相當於 PHP 的 Array:

array(1, 5, 9, 2)

[{a:1}, {b: 5}, ... [/quote]

感謝大大回覆，小弟找到教學了，正把問題刪掉而已，大大就回覆了

太感謝了，辛苦了:)

xxoxxoxxoxx 發表於 2009-10-22 17:10

合併原po:loveliness:

[[i] 本帖最後由 xxoxxoxxoxx 於 2009-10-22 17:59 編輯 [/i]]

wmh 發表於 2009-10-23 09:48

不用修改原 po 啦，可以直接回覆一篇新的或另 po 都可以，這樣如果有其他人看到才不會看不懂。

我建議你先用 JavaScript 的 Array 存放你要組的 table 字串，最後用 join() 合成字串後再用 $("#content").html() 把值給放入，這樣效能會比較好。先試試看吧，有問題再提出囉。

xxoxxoxxoxx 發表於 2009-10-23 11:13

感謝大大回復，小弟再研究看看好了

我想說合併原po比較不會浪費資源，想說是相關問題

呵呵，感謝大大回覆

我有看到xml的方式，還在研究適不適用於json

xml
[quote]<?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>[/quote]

jquery script
[quote]$(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>Publisher</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):odd").addClass('myodd');
});
}
});
});[/quote]
body html
[quote]<table border=0 id=maintable cellspacing="0" cellpadding="5" ></table>[/quote]

[[i] 本帖最後由 xxoxxoxxoxx 於 2009-10-23 11:15 編輯 [/i]]

wmh 發表於 2009-10-23 12:29

嗯，以 AJAX 資料傳輸的角度來看，使用 JSON 和 XML 的差異不大，就看你想選哪一種囉。

xxoxxoxxoxx 發表於 2009-10-23 12:49

感謝大大，我依xml的方式研究出json的方法了:lol

只是不知道這樣寫好不好

再麻煩大大幫我看一下

以下：
----------------------------------------
test.json
[quote]{
"column":["a","b","c"],
"data": [
      {"a": "aaa", "b": "bbb", "c": "ccc" },
      {"a": "aaaa", "b": "bbbb", "c":"cccc" },
      {"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
      ]
}[/quote]

jquery script
[quote]
      <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>[/quote]

body
[quote]<table border=0 id="maintable" cellspacing="0" cellpadding="5" ></table>[/quote]

結果：[table=128][tr][td]a[/td][td]b[/td][td]c[/td][/tr][tr][td]aaa[/td][td]bbb[/td][td]ccc[/td][/tr][tr][td]aaaa[/td][td]bbbb[/td][td]cccc[/td][/tr][tr][td]aaaaa[/td][td]bbbbb[/td][td]ccccc
[/td][/tr][/table]

[[i] 本帖最後由 xxoxxoxxoxx 於 2009-10-23 14:09 編輯 [/i]]

wmh 發表於 2009-10-24 09:07

不錯喔，自己寫出來總是比較有成就感而且可以比較踏實學到東西。

不過你用的 append 和 jQuery 的 selector 太頻繁，效能比較不是那麼好，如果先把 html 組起來，一次 append 會比較好，而且字串的組合要用來 array 操作，效能會更好。

[code js]
$(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(''));
  });
});
[/code]

xxoxxoxxoxx 發表於 2009-10-26 11:15

回復 11# 的帖子

感謝大大回覆，先將字串寫入一個變數再印出
筆數多起來，效能真的好很多耶:lol

感謝大大

另外請問大大，小弟寫的json格資資料這樣合適嗎?

我本來寫一欄為column的資料，想說可以用迴圈來宣告資料

但好像沒辦法，變成a,b,c還是要再單獨宣告一次

所以我寫"column":["a","b","c"],這一欄資料是不是無意義

直接寫這樣就好了?

[quote]{
"data": [
      {"a": "aaa", "b": "bbb", "c": "ccc" },
      {"a": "aaaa", "b": "bbbb", "c":"cccc" },
      {"a": "aaaaa", "b": "bbbbb", "c":"ccccc" }
      ]
}[/quote]

[[i] 本帖最後由 xxoxxoxxoxx 於 2009-10-26 11:19 編輯 [/i]]

wmh 發表於 2009-10-27 09:26

欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題：[code][
  ["aaa", "bbb", "ccc"],
  ["aaaa", "bbbb", "cccc"],
  ["aaaaa", "bbbbb", "ccccc"]
][/code]

xxoxxoxxoxx 發表於 2009-10-27 09:55

[quote]原帖由 [i]wmh[/i] 於 2009-10-27 09:26 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=861&ptid=303][img]http://jsgears.com/images/common/back.gif[/img][/url]
欄位或資料的格式就看你自己的實做狀況囉，如果自己能掌握 server 端的 output，那麼用最簡單的 array 也沒問題[/quote]

嗯!!小弟了解了，感謝大大^^

頁: [1]

jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

[問題]jQuery.getJSON 的用法(已解決)

回復 11# 的帖子