请求列表与详情展示

2019独角兽企业重金招聘Python工程师标准>>>

<script type="text/javascript">
        
        function getList(){
            $.ajax({
                type: "GET",
                url: "./api/goodsList.json",
                success: function(data){
                    showList(data);
                },
                error: function(){
                    console.log("err")
                }
            })
        }
        getList();
        function showList(data){
            var data = data.list;
            console.log(data);
            var str = '';
            data.forEach(function(ele,index){
               str += '<a href="goodsInfo.html?id='+ ele.id +'">\
                            <div class="goods_item">\
                                <img src = "'+ ele.imgurl[0] + '" alt = "">\
                                <p class="item_name">'+ ele.name + '</p>\
                                <p class="item_price">'+ ele.spectList[0].price + '</p>\
                            </div>\
                        </a>'
            })
            $('.tab_content').html(str);
        }
    </script>

 

 

详情

function getId() {
    var optionList = location.search.slice(1).split('&');

//jsp   news/show/205.html   获取id=205   location.href.split("/").splice(-1).toString().split(".")[0]
    var idNum;
    optionList.forEach(function (ele, index) {
        if (ele.indexOf('id=') != -1) {
            idNum = ele.slice(3);
        }
    })
    return idNum;
}

console.log(getId());
// 通过ID值取到当前ID数据

getGoodList();
function getGoodList() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/api/goodsList.json',
        success: function (data) {
            createInfo(data);
            // console.log(data);
        },
        error: function () {
            console.log('error');
        }
    })
}
function createInfo(data) {
    var idNum = getId();
    var dataList = data.list;
    var len = dataList.length;
    var listStr = '';
    var liStr = '';
    for (var i = 0; i < len; i++) {
        if (dataList[i].id == idNum) {
            $('.infor_one_img').html('<img src="' + dataList[i].imgurl[0] + '">');
            $('.one_name').html(dataList[i].name);
            dataList[i].spectList.sort(findPrice('price'));
            $('.one_price').html('￥' + dataList[i].spectList[0].price + '-' + dataList[i].spectList[dataList[i].spectList.length - 1].price);
            dataList[i].imgurl.forEach(function (ele, index) {
                listStr += '<img src="' + ele + '">'
            })
            $('.infor_th').append($(listStr));
            dataList[i].spectList.forEach(function (ele, index) {
                liStr = '<li class="buy_spect_li" data-price="' + ele.price + '">' + ele.spect + '</li>'
            })
            $('.buy_spect_wrap ul').html(liStr);
            $('.price_value').html($('.one_price').html());

        }
    }
}

转载于:https://my.oschina.net/parchments/blog/2252056