AJAX，掉个接口，走你...-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
      <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    .thumbnail {
        max-height: 350px;
        height: 330px;
        overflow: hidden;
    }
    .thumbnail>img {
        width: 140px;
        height: 140px;
    }
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, u, i, dl, dt, dd, ol, ul, li, form, label, table, tbody, thead, tr, th, td,{
      margin: 0;
      padding: 0;
      border: 0;
    }
    ol, ul { list-style: none;}
    img { border: 0;}
    #eschList li {float:left;width:150px;height:150px;overflow:hidden;margin-left:30px;text-align: center;border:1px #ccc solid;}
    #eschList li a {padding-left:10px;}
    #eschList li img {margin-top:20px;}
    .loading {width:100px;height:100px;background:#fff;border:1px #ccc solid;text-align: center;line-height: 100px;position:fixed;top:50%;left:50%;margin-top:-50px;margin-left: -50px;font-size:14px;font-weight: bold;}
    </style>
</head>

<body>
    <div class="container">
        <div class="row hotgoodslist">
            <!-- <div class="page-header">  
            <h1>热销商品<small>年度热销商品排行榜</small></h1>  
        </div>  
        <div class="col-sm-4 col-md-3">  
            <div class="thumbnail">  
                <img src="..." alt="...">  
                <div class="caption">  
                    <h3>￥<span>400</span></h3>  
                    <p>商品名称</p>  
                    <p>  
                        <a href="#" class="btn btn-danger" role="button">加入购物车</a>  
                        <a href="#" class="btn btn-primary" role="button">立即购买</a>  
                    </p>  
                </div>  
            </div>      
        </div>   -->
        </div>
        <div class="row shirt">
            <div class="page-header">
                <h1>衬衫<small>众多品牌齐聚，商务休闲首选</small></h1>
            </div>
        </div>
    </div>

<div id="eschList">
    <ul></ul>
</div>

<div class="loading">
    loading......
</div>
    <script>
    $(function() {
    //     $.ajax({
    //         url: "http://datainfo.duapp.com/shopdata/getGoods.php?callback=?",
    //         type: "get",
    //         cache:true,//(默认: true,dataType为script和jsonp时默认为false)设置为 false 将不缓存此页面，建议使用默认
    //         data: {
    //             classID: 1
    //         },//发送到服务器的数据，可以直接传对象{a:0,b:1}，如果是get请求会自动拼接到url后面，如：&a=0&b=1
    // //如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
    // //
    //         dataType: "jsonp",//根据返回数据类型可以有这些类型可选xml html script json jsonp text
    //         success: function(resp) {
    //             console.log(resp);
    //             for (var i = 0; i < resp.length; i++) {
    //                 var $goodsBox = $("<div>").addClass("col-md-3").addClass("col-sm-4");
    //                 var $thumbnail = $("<div>").addClass("thumbnail");
    //                 $(".shirt").append(
    //                     $('<div>').addClass('col-md-3 col-sm-4').append(
    //                         $('<div>').addClass('thumbnail').append(
    //                             $('<img>').attr('src', resp[i].goodsListImg)).append(
    //                             $('<div>').addClass('caption').append(
    //                                 $('<h3>').append(
    //                                     $('<span>').text(resp[i].price))).after(
    //                                 $('<p>').text(resp[i].goodsName)).after(
    //                                 $('<p>').text(resp[i].goodsID).after($( '<p>').append('<a href="#" class="btn btn-danger" role="button">加入购物车</a>').append('<a href="#" class="btn btn-primary" role="button">立即购买</a>'))
    //                             )
    //                         )
    //                     )
    //                 );
    //             }
    //         }
    //     });
    //     
    

// get || post方法
        $.get(
            'http://datainfo.duapp.com/shopdata/getGoods.php?callback=?',
            {classID: 1},
            function(resp) {
                console.log(resp);
                for (var i = 0; i < resp.length; i++) {
                    var $goodsBox = $("<div>").addClass("col-md-3").addClass("col-sm-4");
                    var $thumbnail = $("<div>").addClass("thumbnail");
                    $(".shirt").append(
                        $('<div>').addClass('col-md-3 col-sm-4').append(
                            $('<div>').addClass('thumbnail').append(
                                $('<img>').attr('src', resp[i].goodsListImg)).append(
                                $('<div>').addClass('caption').append(
                                    $('<h3>').append(
                                        $('<span>').text(resp[i].price))).after(
                                    $('<p>').text(resp[i].goodsName)).after(
                                    $('<p>').text(resp[i].goodsID).after($( '<p>').append('<a href="#" class="btn btn-danger" role="button">加入购物车</a>').append('<a href="#" class="btn btn-primary" role="button">立即购买</a>'))
                                )
                            )
                        )
                    );
                }
            } ,'jsonp');


$.ajax({
    // url:'http://jspang.com/DemoApi/oftenGoods.php',
    url:'http://jspang.com/DemoApi/typeGoods.php',
    type:'get',
    dataType:'json',
    cache:true,
    beforeSend:function () {
        setTimeout(function () {
            $('.loading').fadeOut()
        },500)
    },
    success:function (data) {
        // var  dataes =JSON.parse(data);
        var listTag = '';
        for (var i = 0; i < data.length; i++) {
         for (var m = 0; m < data[i].length; m++) { 
            // var attrImg = '';
            // attrImg += data[i][m].goodsImg;
            // $('#eschList > ul').css({'marginLeft':'40%'}).append('<li>' + '<span>' + data[i][m].goodsId + ',&nbsp;&nbsp;&nbsp;' + '</span>' + '<a href="">' + data[i][m].goodsName+ '</a>'  + '</li>');
            // $('#eschList > ul li').append($('<img>').attr('src',data[i][m].goodsImg));
            $('#eschList > ul').append(
                $('<li>').append(
                    $('<span>').text(data[i][m].goodsId).after(
                        $('<a href="#" target="_blank">').text(data[i][m].goodsName)
                        ).after($('<img>').attr('src',data[i][m].goodsImg)))
                )
            
         }
        }
    }

}) })


    </script>
</body>

</html>
复制代码