ajax傳送請求，以及動態新增到頁面
後臺傳送介面，在沒有介面文件的情況下。可以選擇線上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);
}主要就是拼接字串，要區分單雙引號，要注意結構迴圈。