ajax发送请求，以及动态添加到页面

最新推荐文章于 2022-02-07 14:29:51 发布

元宝_

最新推荐文章于 2022-02-07 14:29:51 发布

阅读量5.4k

点赞数 3

本文链接：https://blog.csdn.net/gxy940305/article/details/73250568

版权

后台发送接口，在没有接口文档的情况下。可以选择在线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);

        }

主要就是拼接字符串，要区分单双引号，要注意结构循环。