欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-26 11:42:29
前后台分离,虚拟后台传回来的json格式数据文件数据goodslist.json文件如下: [ {"id":"01",&...

前后台分离,虚拟后台传回来的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");  
                      }  
    });