用JQuery+Ajax实现简单的异步取得图片 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>从后台取的静态图片</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        img{
            width: 200px;
            height: 230px;
            margin: 10px;
        }
    </style>

</head>
<body>
<div id="container"></div>
<button id="load_img">Loading_Img</button>
</body>
</html>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    /*给button按钮添加click时间*/
    $("#load_img").on("click",function(){
        /*清空图片*/
        $("#container").empty();
        $.ajax({
            url:"data",
            type:"post",
            dataType:"json",
            success:function(data){
                /*用each遍历，item表示dada.data中的每一个*/
                $.each(data.data,function(i,item){
                    var url=item.url;
                    $("#container").append("<img src='"+url+"'/>");
                })
            }
        })
    })
</script>

备注：data是自己写的用json文件名
posted @ 2016-08-31 11:20  三高娘子  阅读(1160)  评论(0)    收藏  举报