列表页到对应的详情页

前端 列表页

houseDetailHtml += '<li>' + '<a id="houseDetail" href="houseDetail.jsp?id='+ hid + ' " class="show-image">' +
    '<img src= ' + navs.House[i].suites[j].image + ' width="240px" height="180px" id="foo">' +
    '</a>' + '<div class="show-details">' + '<p class="house-title">' +
    '<a id="houseDetail" href="houseDetail.jsp?id=' + hid + '">' +
    navs.House[i].remarks + '</a>' + '</p>' +
    '<p class="house-about">' +
    '<span class="layui-icon layui-icon-home">' + '</span>' +
    '<span>' + navs.House[i].suites[j].unitType + '</span>' +
    '<span class="flag-line">|</span><span>' + navs.House[i].suites[j].buildUsArea +
    'm<sup>2</sup>' + '</span>' + '<span class="flag-line">|</span>' + '<span>' +
    navs.House[i].suites[j].suiteName + '</span>' + '<span class="flag-line">|</span>' +
    '<span>' + navs.House[i].suites[j].floor + '</span>' + '<span class="flag-line">|</span>' +
    '<span>' + navs.House[i].suites[j].use + '</span>' + '</p>' + '<p class="house-address clearfix">' +
    '<span class="layui-icon layui-icon-location">' + '</span>' + '<span class="whole-line">' +
    '<span>' + navs.House[i].addr + '</span>' + '</span>' + '</p>' + '<div class="show-price">' +
    '<span class="sale-price"> ' + navs.House[i].suites[j].sprice + '</span>' + '<span class="sale-unit">元/月</span>' +
    '</div>' + '</div>' + '</li>'

$('#houseDetail').click(function (){
    $.ajax({
        url:"main/userHome"
    })
})

后端Controller

/**
 * 根据id获取对应房子详情
 * @param Id
 * @param model
 * @return
 * @throws JsonProcessingException
 */
@ResponseBody
@RequestMapping(value = "/selectById/{Id}",produces = "text/html;charset=UTF-8")
public String selectById(@PathVariable("Id") Integer Id, Model model) throws JsonProcessingException {
    Proj findHomeInfo = projService.queryById(Id);
    model.addAttribute("House",findHomeInfo);
    return JsonUtil.getJSON(model);
}

前端详情页

//获取url中的参数
function getUrlParam(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    let r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
    }
//接收URL中的参数booksId
let id = getUrlParam('id');
//测试
console.log('id:'+id);

$.ajax({
    url:"index/selectById/" + id,
    data_type:"json",
    success: function (data){
        //分割成对象
        let navs = eval("(" + data + ")");
        //测试
        console.log(navs)
        //房子的标题
        let houseTitleHtml = ''
        houseTitleHtml += '<h2 class="house-title">'+ navs.House.remarks  +'</h2>'
        //动态加入
        $(".tags").before(houseTitleHtml)

        //房子的备注
        let houseRemarkHtml = ''
        houseRemarkHtml += '<span>' + navs.House.suites[0].sremarks +'</span>'
        //动态加入
        $(".tags").append(houseRemarkHtml)

        //房子的一些详细信息
        let houseMsgHtml = ''
        houseMsgHtml += '<div class="show-price">' + '<span class="sale-price">' +
            navs.House.suites[0].sprice + '</span>' + '<span class="sale-unit">元/月</span>' +
            '<span class="area">' +"  " + navs.House.suites[0].use +" " +navs.House.suites[0].method + '</span>'+
            '</div>'+'<hr>'+'<div class="show-house-name">'+'<p>'+'<span class="field">小区名称:</span><span class="name">'+
            navs.House.name +'</span></p>'+'<p><span class="field">小区地址:</span><span class="name">'+navs.House.addr+
            '</span></p>'+'<p><span class="field">房源ID:</span><span class="name">'+navs.House.suites[0].resCfeNum +
            '</span></p>'+'<p><span class="field">联系电话：</span><span class="name">18379991379</span></p>'+
            '</div><hr><div class="house-model"><ul><li><p>'+navs.House.suites[0].unitType+'</p>'+
            '<span>规模</span>'+'</li><li><p>'+ navs.House.suites[0].buildUsArea+'平米</p>' +'<span>建筑面积</span>'+
            '</li><li><p>'+navs.House.suites[0].orientation + '</p>'+'<span>朝向</span>'+'</li></ul></div><hr>'

        //动态加入
        $('.checkOrder').before(houseMsgHtml)

    }
})