1.先看数据类型。这是一个标准得json返回值
{
"code": 200,
"msg": "请求成功!",
"data": [
{
"itemName": "给阿姨倒一杯卡布奇诺",
"unit": "颗",
"count": 6
},
{
"itemName": "单走一个6",
"unit": "颗",
"count": 6
},
{
"itemName": "13张牌你能秒我?",
"unit": "副",
"count": 1
},
{
"itemName": "盖亚!~~~",
"unit": "半口",
"count": 1
}
]
}
2.再看html的表格,我是循环遍历在表格里面的就是tr和td。这是一个标准的html表格,注意我给了tbody一个id。记住这个id等会要考。
<table border="1" style="border-color:#e5e5e5">
<thead>
<tr>
<th width="250px">项目名称</th>
<th width="420px">单位</th>
<th width="150px">数量</th>
</tr>
</thead>
<tbody id="tbody_zd">
<tr>
<td>
<span>111</span>
</td>
<td>
<span>222</span>
</td>
<td>
<span>333</span>
</td>
</tr>
</tbody>
</table>
3.开始遍历,先定义一个空变量,然后再for里面 += 循环拼接,最后再 $("#tbody_zd").html(); html方法里面放你定义的变量
$.ajax({
url:"https://www.baidu.com", //请求地址(问号前面就是地址 不需要问号)
type:'post', //请求方式(可以是POST或者GET)
data:{ //请求参数(前面参数冒号后面值 如果是变量不需要引号如果是固定的参数请用引号引起来)
zd_id:zd_id, //列子
},
dataType:'json', //返回数据格式 (可以是文本可以是网页可以是json数据也可以是jsonp,默认返回json)
beforeSend: function(){
//数据开始请求 这里可以写个小特效 比如加载中... 那在请求到了结果可以改成加载完毕
// $('title').html('数据请求中');//(例子可删)例如改变浏览器标题为数据请求中
},
success:function(data){ //请求数据结果
// $('title').html('数据请求结束');//(例子可删)服务器给出结果了在这里改变下
if(data.code == 200){
console.log(data);
$("#zd_id").val(JSON.stringify(data.data));
var kong = '';
for(var i=0; i<data.data.length; i++){
kong +=`
<tr>
<td>
<span>${data.data[i].itemName}</span>
</td>
<td>
<span>${data.data[i].unit}</span>
</td>
<td>
<span>${data.data[i].count}</span>
</td>
</tr>
`;
}
$("#tbody_zd").html(kong);
return false;
}else{
alert(data.msg)
}
// console.log(data) //打印一下请求到的数据
}
})