js加载数据
这一小节我们将使用js完成酒店列表内容
1、数据获取
我们要通过ajax获取LBS.云中的数据并将对应的旅馆数据加载到,右侧选项中,并且每次对条件修改的同时我们将异步刷新旅馆列表界面,这里我们仅需完成旅馆信息加载函数。我将会在后面小节中介绍LBS云的内容。
2、获取模板
我们使用下面代码,将hotel中的内容获取
var hotel = document.getElementById('hotel');
var hotel_html = hotel.innerHTML;
3、正则表达式的使用
我们匹配到hotel_html中的{{id}}、{{imgSRC}}等等,并将其替换为我们想要的数据。做法如下:
var html = '';
for(var i=0;i<hotelInfo.length;i++){
html += hotel_html.replace(/\{\{imgSrc\}\}/g,hotelInfo[i].img.big)
.replace(/\{\{name\}\}/g,hotelInfo[i].name)
.replace(/\{\{address\}\}/g,hotelInfo[i].address)
.replace(/\{\{price\}\}/g,'¥'+hotelInfo[i].price);
}
我将获取hotelInfo的函数放到了loadInfo.js文件夹中,我们将在将LBS那一章时讲解。
在提示位置加入代码,将获取到的html赋值给hotel.innerHTML
hotel.innerHTML = html;