c 抓取网页数据(从后台获取数据显示在界面上是前端开发所必须掌握的一项基本技能 )

　　c 抓取网页数据(从后台获取数据显示在界面上是前端开发所必须掌握的一项基本技能

)

　　从后台获取数据并显示在界面上是前端开发必须掌握的一项基本技能。只需将本地模拟数据的json文件中获取的数据记录下来，显示在界面上即可。

　　1.创建一个本地 json 文件并将其命名为 data.json。 json文件格式如下：

　　{

"list":[

{

"project_img":"images/Home-logo1-hua.png",

"project_name":"111",

"money_range":"2000~40000",

"day_rate":"0.04",

"day_limit":"7-90",

"day_person":"1400"

},

{

"project_img":"images/Home-logo2-bao.png",

"project_name":"222",

"money_range":"2000~40000",

"day_rate":"0.04",

"day_limit":"7-90",

"day_person":"1"

}

]

}

　　2.在js中编写方法，调用方法。插入数据时，innerHTNML 方法是原生的 JavaScript 方法，但这种方法是把 HTML 代码插入到 div 中，而不是追加。要追加，您需要每次保存之前的 HTML 内容。 append方法是jquery方法，可以直接添加到div中。

　　notice();

function notice(){

$.ajax("Json/data.json",{

data:{},

dataType:'json',

type:'get',

async:'false',

success:function(data){

var listdata=data.list; //列表数据

if(listdata.length>0){ //项目列表

var listInfo="";

$.each(listdata,function(){

listInfo+=""+

"+this.project_img+"+

""+

""+this.project_name+""+

"<p class=&#39;money-range&#39; class=&#39;mui-ellipsis loan-range&#39;>"+this.money_range+""+

"

　　每日百分比"+this.day_rate+"%，应该为"+this.day_limit+"天，"+this.day_person+"人已交"+""+

""+

""+

"详情"+

""+

"";

});

$("#project_list")[0].innerHTML=listInfo;

}

}

// error:function(xhr,type,errorThrown){

// alert("系统繁忙，请联系管理员");

// }

})

}</p>