教你用JQ怎么循环遍历数据，学会直接月入过万，不够我给你补！

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)    //打印一下请求到的数据
            }
        })