js讀取json文件(原生和jQuery)

1.首先編寫一個json文件:demo.json

[ 
{ 
"name":"張三", 
"sex":"男", 
"email":"[email protected]" 
}, 
{ 
"name":"李四", 
"sex":"男", 
"email":"[email protected]" 
}, 
{ 
"name":"王五", 
"sex":"女", 
"email":"[email protected]" 
} 
] 

讀取

原生js讀取json文件

<script>
		window.onload = function () {
            var url = "demo.json"/*json文件url,本地的就寫本地的位置,如果是服務器的就寫服務器的路徑*/
            var request = new XMLHttpRequest();
            request.open("get", url);/*設置請求方法與路徑*/
            request.send(null);/*不發送數據到服務器*/
            request.onload = function () {/*XHR對象獲取到返回信息後執行*/
                if (request.status == 200) {/*返回狀態爲200,即爲數據獲取成功*/
                    var json = JSON.parse(request.responseText);
                    for(var i=0;i<json.length;i++){
                    	console.log(json[i].name);
                    }
                    console.log(json);
                }
            }
       }
	</script>

$.getJSON

<script type="text/javascript">
    var Ajax = function ()
    {
        $.getJSON ("demo.json", function (data)
        {
            $.each (data, function (i, item)
            {
               console.log(item.name);
            });
        });
    }();
</script>

$.ajax

$.ajax({
				url: "demo.json",//json文件位置,文件名
				type: "GET",//請求方式爲get
				dataType: "json", //返回數據格式爲json
				success: function(data) {//請求成功完成後要執行的方法 
				   //給info賦值給定義好的變量
				   var pageData=data;
				   for(var i=0;i<data.length;i++){
					   console.log(pageData[i].name);
				   }
				}
			})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章