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 = '
- ';
- ' + navData[i].name + ' '
- ' +navData[i].name + ' '
// navData 就是result里面的cate_ret这个数组
var navData = result.data.cate_ret;
for (var i = 0; i //默认第一个li显示为红色，有类名，所以要判断 if(i==0){ html += '
}else{
html += '
}
}
html+='
}
//添加到类名为gservice的div下
$('.gservice').append(html);
};
如果结构层只有一层，动态添加的数据不用添加到循环体内，如果结构层有多层，要把动态添加的数据放在循环体内，这样会依次遍历，对应添加。
// 遮盖层
var cateName = function(result) {
// navData 就是result里面的hall_ret这个数组
var hallData=result.data.hall_ret; for(vari=0;i //遮盖层的div var html = ' html+=hallData[i].title; html+='
$('.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 = '';
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 += '' + navData[i].name + ' '
}else{
html += '' + navData[i].name + ' '
}
}
html+='';
for(var j in condata){
conhtml+=''+
''+
'
'+
''+
condata[j].title+
''+
''+
''+
''+
'参考价：'+'¥'+condata[j].original_price+''+'¥'+condata[j].price+''+
''+
'- '+condata[j].cate_name+'
'+
'- '+condata[j].cate_name+'
'+
'
'+
''+
''+
'';
}
}
$('.gservice').append(html);
$('.gshow').html(conhtml);
}主要就是拼接字符串，要区分单双引号，要注意结构循环。