ajax交互获得后台数据（广告）显示在前端页面

前端页面

<div id="index5-1"></div>
<div id="index5-2"></div>
<div id="index5-3"></div>
<div id="index5-4"></div>

后台数据（json）

{
"status": 1,
"msg": "获取成功",
"data": {
"index5-1": {
"data": {
"id": 3,
"type": 1,
"title": "5-1",
"url": "http://laravelacademy.org/post/6742.html",
"content": "",
"img": "http://www.dcw.com/upload/advert/20170707/image_20170707595f3f8ef2442.jpg",
"created_at": "2017-07-07 14:44:33",
"updated_at": "2017-07-07 16:06:51",
"version": "2017154"
},
"display": 1
},
"index5-2": {
"data": {
"id": 4,
"type": 2,
"title": "5-2",
"url": "",
"content": "<script type=\"text/javascript\" id=\"gg_1\">\n /*首页横幅*/\n var cpro_id = \"u1268213\";\n </script>\n <script type='text/javascript' src='https://cpro.baidustatic.com/cpro/ui/c.js'></script>",
"img": null,
"created_at": "2017-07-07 14:55:38",
"updated_at": "2017-07-07 14:55:38",
"version": "2017154"
},
"display": 1
},
"index5-3": {
"data": "",
"display": 0
},
"index5-4": {
"data": "",
"display": 0
}
}
}

处理数据

$.ajax({
    // 请求方式
    type:"get",
    url:"http://www.dcw.com/adverts?type=5",后台接口
    // 同步异步
    async:true,
    dataType:"json",（数据类型）
    // 返回前（发送数据前的状态）
    beforeSend:function(data){
        loading(1);
    },
回调函数
    success:function(data){

        if (data.status==1){
            cl(data.data);
        }
    },
返回错误
    error:function(xhr){

    }
});

函数封装  声明

function  loading(err) {

    console.log(err);
}
function cl(data){
    for(var item in data){
        var arr=data[item];
        if($("#"+item) !=='undefined'){
            if(arr.data.type ==1){
                $("#"+item).html('<a href="'+arr.data.url+'"><img src="'+arr.data.img+'"></a>');
            }else{
                  $("#"+item).html(arr.data.content);
            }
        }
    }
}

转载于:https://www.cnblogs.com/ycc-521/p/7196325.html