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"
			}
		]
	}
}