$ajax如何 遍历这种数组结构 输出到html

Question

最近学到ajax 对于只有html和css知识的小白是在搞不懂这玩意，这不又要像思否大佬们请教了！

请求的数据结构如下，$aja()方式
{
"list": [{"id": 1,"name": "小白"},{"id": 2,"name": "小黑"},{"id": 3,"name": "小红"}]
}

请求代码：

 $.ajax({
      url:"data.html",
      type:"get",
      dataType:"html",
      success: function(list){
              alert("请求成功");
            },
            error:function(){
              alert("请求失败");
            }
       })

我想输出到html结构为：

<li>编号：1 名称：小白</li>
<li>编号：2 名称：小黑</li>
<li>编号：3 名称：小红</li>

求大佬们帮帮忙？

Answer 1

这是js的问题

var data = {
"list": [{"id": 1,"name": "小白"},{"id": 2,"name": "小黑"},{"id": 3,"name": "小红"}]
}

var html = ''
html = data.list.map(function(item){
    return "<li>编号："+item.id+" 名称："+ item.name +"</li>"
}).join('')

Answer 2

var html='' ;
$.ajax({

  url:"data.html",
  type:"get",
  dataType:"html",
  success: function(list){
      for(list in item){
      html+='<li>编号:'+item['id']+' 名称:'+item['name']+'</li>
        },
        error:function(){
          alert("请求失败");
        }
   })
   
   然后再把html加入到元素中就可以了
    $('#result').html(Html);
    
    
    大体是这个思路，代码没有ide敲可能会有点小问题，有问题可以再评论
   
   

Answer 3

一楼给的答案很完善了，高阶函数map遍历，但有一点是高阶函数遍历一旦开始就不能停止，所以具体还是看楼主的需求吧，如果紧单单要个结构的话，那没问题。

Answer 4

我这个方法是不是有问题，为什么一次比一次多，而不是追加效果？？

var refresh_open = true;
var page=1;//初始页数
var mid=1;//mid:模块1视频2文章3专题        
var limit=20;//每页条数，支持10,20,30 
var html='' ;
function ajax_dat(){
  if(refresh_open){
    $.ajax({
        url:maccms.path+"/index.php/ajax/data.html",
        type:"POST",
        dataType:"json",
        data: 'mid='+mid+'&page='+page+'&limit='+limit+'',//url参数
        success:function(data){
            if(data){
                var vod=data['list']
                for (var i = 0; i < vod.length; i++) {
                  html +='<dd class="odd">';
                  html +='<a href="'+vod[i].detail_link+'" class="hx_title">'+vod[i].vod_name+'</a></dd>';
                 }
                  var vod_list=$('#vod_list');
                  vod_list.append(html);
                  page +=1
                  setTimeout(function(){
                     refresh_open = true;
                   },100);
                }else{
                  alert("")  
               };
           },
        error:function(){
                  alert("请求失败");
                }
        })
    }
}