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

xxoxxoxxoxx

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

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

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

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

xxoxxoxxoxx

已解決，自刪

抱歉

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

wmh

搜尋一下 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

原帖由 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

合併原po

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

wmh

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

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

xxoxxoxxoxx

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

我想說合併原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

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