当前位置： 移动技术网 > IT编程>网页制作>CSS > Ajax使用json前后台交互代码分析

Ajax使用json前后台交互代码分析

2018年04月04日  | 移动技术网IT编程  | 我要评论

前后台分离，虚拟后台传回来的json格式数据文件数据goodslist.json文件如下：

[  
    {"id":"01","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"},  
    {"id":"02","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"},  
    {"id":"03","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"},  
    {"id":"04","exhibitorId":"0001","creatTime":"2017-10-2","exhibitsName":"张三","intro":"简介"}  
]

要将上述json数据通过ajax获取渲染到页面表格中：

                <table border="1">  
          <thead>  
            <tr>  
              <th>id</th>  
              <th>展品id</th>  
              <th>时间</th>  
              <th>展商姓名</th>  
              <th>详情</th>  
            </tr>   
          </thead>                            
         <tbody id="goods"></tbody>  
        </table>

注意一定要进入jQuery头文件：

<script type="text/javascript" src="jquery.min.js"></script>

ajax请求具体如下：

           $.ajax({   
    type:"GET",   
    url:"goodslist.json",   
    dataType:"json",   
    success:function(data){   
     list="";  
    //i表示在data中的索引位置，n表示包含的信息的对象   
    $.each(data,function(i,result){   
    //获取对象中属性  
        list+="<tr>"  
        list+="<td>"+result["id"]+"</td>";   
        list+="<td>"+result["exhibitorId"]+"</td>";  
        list+="<td>"+result["creatTime"]+"</td>";  
        list+="<td>"+result["exhibitsName"]+"</td>";  
        list+="<td>"+result["intro"]+"</td>";  
        list+="</tr>";  
     });   
        $('#goods').html(list);   
    },  
                      error : function(error) {  
                          alert("error");  
                      }  
    });

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网