1. 程式人生 > >獲取JSON資料的方法

獲取JSON資料的方法

json資料的獲取有很多方法,主要細說一下ajax獲取的方法。

  1. json檔案內容(item.json)
    [
    {
    “name”:“張國立”,
    “sex”:“男”,
    “email”:"[email protected]",
    “url”:"./img/1.jpg"
    },
    {
    “name”:“張鐵林”,
    “sex”:“男”,
    “email”:"[email protected]",
    “url”:"./img/2.jpg"
    },
    {
    “name”:“鄧婕”,
    “sex”:“女”,
    “email”:"[email protected]",
    “url”:"./img/3.jpg"
    },
    {
    “name”:“張國立”,
    “sex”:“男”,
    “email”:"[email protected]
    ",
    “url”:"./img/4.jpg"
    },
    {
    “name”:“張鐵林”,
    “sex”:“男”,
    “email”:"[email protected]",
    “url”:"./img/5.jpg"
    },
    {
    “name”:“鄧婕”,
    “sex”:“女”,
    “email”:"[email protected]",
    “url”:"./img/6.jpg"
    }
    ]

2 傳送Ajax請求,獲取Json資料

複製程式碼

Insert title here

success: function(result){//返回的引數就是 action裡面所有的有get和set方法的引數
addBox(result);
}
});
/$.get(“item.json”,function(result){
//result資料新增到box容器中;
addBox(result);
});

/
});
function addBox(result){
//result是一個集合,所以需要先遍歷
$.each(result,function(index,obj){
$("#box").append("

"+//獲得圖片地址
”+
//獲得名字
“ ”+obj[‘name’]+" "+
//獲得性別
“ ”+obj[‘sex’]+" "+
//獲得郵箱地址
“ ”+obj[‘email’]+" "+
“ ”);
});
}

  1. 執行效果:
    在這裡插入圖片描述

  2. 檔案結構
    在這裡插入圖片描述