美文网首页
jQuery--ajax取后台json,传递到页面

jQuery--ajax取后台json,传递到页面

作者: 錦魚 | 来源:发表于2018-12-24 15:40 被阅读0次
<script type="text/javascript">
    <!---->
   $(function () {
       $.ajax({
           url: './js/data.json',
           type: 'get',
           dataType: 'json',
           timeout: 1000,
           beforeSend: LoadFunction, //加载执行方法    
           error: erryFunction,  //错误执行方法    
           success: succFunction //成功执行方法    
       });
       function LoadFunction() {$("#list").html('加载中...');}
       function erryFunction() {alert("error");}
       function succFunction(data) {
           $("#list").html('');
           //eval将字符串转成对象数组  
           var json2 = eval(data); //数组
           console.log(json2["code"]);
           let msg1 = json2["msg"];
           json2 = json2["data"];
           $.each(json2, function (index, item) {
               //循环获取数据    
               var imgUrl = json2[index].imgUrl;
               var price = json2[index].price;
               var name = json2[index].name;
               // $("#js_list").html($("#js_list").html() + "<br>" + imgUrl + " - " + price + " - " + name + "<br/>");
               $("#js_list").html($("#js_list").html() +
                   '            <div class="col-lg-3 col-md-4  col-xs-4 col-sm-4 col-xs-6  modify-padding product-info">\n' +
                   '                <div class="thumbnail modify-border>\n' +
                   '                    <a href="#">\n' +
                   '                        <img src="'+imgUrl+'" alt="商品图片">\n' +
                   '                        <div class="caption">\n' +
                   '                            <h4>'+price+'</h4>\n' +
                   '                            <em>'+name+'</em>\n' +
                   '                        </div>\n' +
                   '                    </a>\n' +
                   '                    <div class="clearfix">\n' +
                   '                        <a href="#" class="btn btn-danger pull-right">添加到购物车</a>\n' +
                   '                    </div>\n' +
                   '                </div>\n' +
                   '            </div>\n')
           });
       }
   }); 
</script>

相关文章

网友评论

      本文标题:jQuery--ajax取后台json,传递到页面

      本文链接:https://www.haomeiwen.com/subject/tiszkqtx.html