AJAX动态加载HTML

最新推荐文章于 2024-11-17 14:09:40 发布

原创最新推荐文章于 2024-11-17 14:09:40 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX动态加载HTML

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用AJAX技术实现网页HTML内容的动态加载。首先，我们探讨了AJAX动态加载的基本思路，接着通过实例展示了具体的操作步骤和代码实现，帮助读者理解并掌握这一技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

在这里插入图片描述

实战

var roomdetaildata;
$.ajax({
    url:"http://localhost:8080/room/selectRoomMiniServiceByHotelId?hotelId="+hotelId,
    type:"GET",
    success:function (result2) {
        roomdetaildata = result2;
    }
});

var mydata = [] ;
$(function () {
    var policyitems = $("#policy-items");
    // console.log(policyitems);
    $.ajax({
        url:"http://localhost:8080/room/selectRoomByHotelId?hotelId="+hotelId,
        type:"GET",
        success:function (data) {
            var list = [];
            for (var i = 0; i < data.data.length; i++) {
                // mydata.add(data.data[i].roomId);
                mydata.push(data.data[i].roomId)
                var ni = i;
                list.push("<p class=\"name\" title=\""+data.data[i].hotelRoomName+"\">"+data.data[i].hotelRoomName+"</p>");
                list.push("<span>面积"+data.data[i].hotelRoomArea+"㎡</span>");
                //这里不能再用ajax，必须调用之前的
                for (var k = 0; k < roomdetaildata.data.length; k++) {
                            if (roomdetaildata.data[k].roomId == mydata[i]) {
                                var breakfast;
                                var iswindow;
                                if (roomdetaildata.data[k].isBreakfast == false){
                                    breakfast = '无早餐';
                                } else {
                                    breakfast = '有早餐'
                                }
                                if (roomdetaildata.data[k].isWindow == false) {
                                    iswindow = '无窗';
                                } else {
                                    iswindow = '有窗';
                                }
                                var lessprice = roomdetaildata.data[k].roomOriginPrice - roomdetaildata.data[k].roomPrice;
                                list.push("<span class=\"name\" title=\""+data.data[i].hotelRoomName+"\">"+data.data[i].hotelRoomName+"</span>");
                                list.push("<dd class=\"policy-price\"><span>¥</span><span>"+roomdetaildata.data[k].roomPrice+"</span></dd>");
                              
                                list.push("<span class=\"minuPrice\">原"+roomdetaildata.data[k].roomOriginPrice+"返"+lessprice+"</span>");
                             
                            }
                        }
                   }
              policyitems.html(list.join(""));
          }
}