後臺發送接口，在沒有接口文檔的情況下。可以選擇在線json校驗格式化工具：http://www.bejson.com/ 查看具體數據。
溝通清楚需要什麼請求方式，每個目錄代表哪個模塊。
例如：後臺給接口爲：
http://123.57.36.72:8094/index.php/Index/Hotel/hall/type/1/sid/25
解析爲
{
"status": 1,
"info": "獲取數據成功",
"data": {
"cate_ret": [
{
"id": 0,
"name": "全部"
},
{
"id": "4",
"name": "小型"
},
{
"id": "2",
"name": "中型"
},
{
"id": "1",
"name": "大型"
}
],
"hall_ret": [
{
"id": "4",
"title": "會展1",
"original_price":"1000.00",
"price":"100.00",
"people":"20000-40000人員",
"style": "大海、家園、湖泊、白菜",
"cate_id":"2",
"cate_name": "中型",
"pic":"http://123.57.36.72:8094/Uploads/Default/400_300_default.jpg"
},
{
"id": "6",
"title": "會展3",
"original_price":"400.00",
"price":"120.00",
"people": "5000人",
"style": "你好、真的、是嗎",
"cate_id":"4",
"cate_name": "小型",
"pic":"http://123.57.36.72:8094/Uploads/Default/400_300_default.jpg"
},
{
"id": "2",
"title": "會展2",
"original_price":"5000.00",
"price":"100.00",
"people":"1000-2000",
"style": "寬敞、座位多",
"cate_id":"1",
"cate_name": "大型",
"pic":"http://123.57.36.72:8094/Uploads/Default/400_300_default.jpg"
}
],
"shop_tel":"13722215547"
}
}
動態創建li
var referrerNav = function(result) {
if (result.info == '獲取數據成功') {
//動態創建ul標籤
var html = '<ul>';
// navData 就是result裏面的cate_ret這個數組
var navData = result.data.cate_ret;
for (var i = 0; i <navData.length; i++) {
//默認第一個li顯示爲紅色，有類名，所以要判斷
if(i==0){
html += '<li class="gservice_top_cls">' + navData[i].name + '</li>'
}else{
html += '<li>' +navData[i].name + '</li>'
}
}
html+='</ul>'
}
//添加到類名爲gservice的div下
$('.gservice').append(html);
};
如果結構層只有一層，動態添加的數據不用添加到循環體內，如果結構層有多層，要把動態添加的數據放在循環體內，這樣會依次遍歷，對應添加。
// 遮蓋層
var cateName = function(result) {
// navData 就是result裏面的hall_ret這個數組
var hallData=result.data.hall_ret; for(vari=0;i<hallData.length;i++){
//遮蓋層的div
var html = '<divclass="gshow_mark">';
html+=hallData[i].title;
html+='</div>';
$('.gshow_top').eq(i).append(html);
}
};
結果如圖：
發送ajax請求：
$.ajax({
type:'post', //請求方式
data:{type:2,sid:25}, //請求數據
url:'http://123.57.36.72:8094/index.php/Index/Hotel/hall', //接口地址
dataType:'json', //數據類型
success:function(result){ //成功回調函數
console.log(result);
referrerNav(result); //以下爲動態添加到頁面的方法
referHall(result);
cateName(result);
original(result);
styleList(result);
}
})
成功發送請求動態加載數據以後的頁面。
有些樣式是之前靜態頁面的html寫的結構有問題，沒有改，如果定位元素 ，要考慮到數據變化，所以要正確找到他的父元素進行定位。
注：以上這樣寫，會有一個問題，就是頁面寫死了，不能很好的動態追加數據。所以不太適合正常開發環境。更改以下方法
$.ajax({
type:'post',
data:{type:2,sid:25},
url:'http://123.57.36.72:8094/index.php/Index/Hotel/hall',
dataType:'json',
success:function(result){
if (result.status == 1) {
var html = '<ul>';
var conhtml = "";
// navData 就是result裏面的cate_ret這個數組
var navData = result.data.cate_ret; //condata是result裏面的hall_ret這個數組
var condata = result.data.hall_ret;
for (var i = 0; i < navData.length; i++) {
if(i==0){
html += '<li class ="gservice_top_cls">' + navData[i].name + '</li>'
}else{
html += '<li>' + navData[i].name + '</li>'
}
}
html+='</ul>';
for(var j in condata){
conhtml+='<div class="gshowss">'+
'<div class="gshow_top">'+
'<img src='+condata[j].pic+'>'+
'<div class="gshow_mark">'+
condata[j].title+
'</div>'+
'</div>'+
'<div class="gshow_bottom">'+
'<div class="gshow_bottom_price">'+
'<span style="color:#d12a18">參考價：</span><span class="gshow_bottom_price_cl">'+'¥'+condata[j].original_price+'</span><del cla<!-- ss="gshow_bottom_price_del">'+'¥'+condata[j].price+'</del><i></i>'+
'<ul class="gshow_bottom_shape">'+
'<li>'+condata[j].cate_name+'</li>'+
'<li>'+condata[j].cate_name+'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>';
}
}
$('.gservice').append(html);
$('.gshow').html(conhtml);
}主要就是拼接字符串，要區分單雙引號，要注意結構循環。