jQuery ajax請求json數據

一、數組類型json數據

html部分：

<table id="table" border="1" cellspacing="0" cellpadding="5">
	<tr>
		<th>訂單號</th>
		<th>購買產品</th>
		<th>版本類型</th>
		<th>有效時間</th>
		<th>購買日期</th>
		<th>數量</th>
		<th>總價</th>
	</tr>
	<tbody id="tbody">
						
</tbody>
</table>

jQuery部分代碼：

$.ajax({
    type:"get",
	url:"js/orderlist.json",
	async:true,
	dataType:"json",
	success:function(data){
	//console.log(data);
			var str="";
			for(var i=0;i<data.length;i++){
							
				str+=`
				<tr>
					<td>`+data[i].id+`</td>
					<td>`+data[i].gmcp+`</td>
					<td>`+data[i].type+`</td>
					<td>`+data[i].yxq+`</td>
					<td>`+data[i].gmrq+`</td>
					<td>`+data[i].num+`</td>
					<td>`+data[i].total+`元</td>
				</tr>`;
			}
			$("#tbody").html(str);
			},
			error:function(){
				console.log("error");
		}
});

json數據部分：

[
            {
            	"id":"198002207046",
            	"gmcp":"大決數量",
            	"type":"存產白",
            	"yxq":"3年",
            	"gmrq":"2015-07-15",
            	"num":"5",
            	"total":"340"
            },
            {
            	"id":"197304014379",
            	"gmcp":"值家有類",
            	"type":"但認克",
            	"yxq":"4年",
            	"gmrq":"1979-04-13",
            	"num":"7",
            	"total":"334"
            }
]

二、對象類型json數據

html部分：

<ul id="recently-news">
								
							</ul>

ajax部分：

	$.ajax({
		type:"get",
		url:"js/productsAnews.json",
		dataType:"json",
		success:function(data){
			//console.log(data);
			//最新消息
			var newsdata=data.result.news;
			var strnew="";
			if(newsdata.length>0){
				for(var i=0;i<newsdata.length;i++){
					strnew+='<li><a href="">'+newsdata[i].title+'</a></li>';
				}
				$("#recently-news").html(strnew);
			}else{
				$("#recently-news").html("暫無最新消息");
			}
		},
		error:function(){
			console.log("error");
		}
	});

json數據部分：

{
	"resultcode":"200",
	"reason":"查詢成功",
	"result":{
		"products":[
			{
				"type":"1",
				"title":"PC產品",
				"subContent":[
					{
						"id":"1",
						"name":"影視發作",
						"hot":"false"
					},
					{
						"id":"2",
						"name":"建設方鬥",
						"hot":"true"
					},
					{
						"id":"3",
						"name":"爲西個論",
						"hot":"false"
					},
					{
						"id":"4",
						"name":"團通天機",
						"hot":"false"
					}
				]
			},
			{
				"type":"2",
				"title":"手機應用類",
				"subContent":[
					{
						"id":"1",
						"name":"空力就便",
						"hot":"true"
					},
					{
						"id":"2",
						"name":"此住火裏",
						"hot":"false"
					},
					{
						"id":"3",
						"name":"萬派層物",
						"hot":"false"
					},
					{
						"id":"4",
						"name":"速當格族",
						"hot":"true"
					}
				]
			}
		],
		"news":[
			{
				"title":"無率術對建制多無親歷半規調原",
				"hot":"true",
				"tag":"1"
			},
			{
				"title":"四根同制活場界學迫素個往",
				"hot":"false",
				"tag":"1"
			},
			{
				"title":"員教五不導據家場世國把",
				"hot":"false",
				"tag":"1"
			},
			{
				"title":"去我斷養至格用是派裝大格角...",
				"hot":"true",
				"tag":"1"
			},
			{
				"title":"辦單于接少包已種構調話對",
				"hot":"false",
				"tag":"1"
			}
		]
	}
}