ajax获取后端数据展示（js jq实现教程）

17-12-12 来源：[db:作者]

收藏我要投稿

效果图：

原生js实现：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style type="text/css">  
*{margin:0;padding:0;}  
li{list-style:none;}  
#box{width:500px;height:640px;border:1px solid #ccc;position:relative;top:50%;left:50%;margin:20px -250px;}  
#box .con{width:500px;height:560px;}  
#box .con .item{height:59px;margin:10px 0;border-bottom:1px solid #ccc;display:block;cursor:pointer;}  
#box .con .item img{width:60px;height:50px;float:left;display:block;margin-left:10px;}  
#box .con .item .test{width:400px;height:50px;float:right;}  
#box .con .item .test p{width:300px;font-size:16px;color:#333;text-align:left;display:inline-block;white-space: nowrap;overflow: hidden;text-overflow:ellipsis}  
#box .con .item .test .ft{width:50px;height:50px;line-height:50px;font-size:20px;color:#333;text-decoration:center;display:inline-block;float:right;}  
  
#box .page{width:500px;height:31px;}  
#box .page ul{height:31px;margin-top:10px;}  
#box .page ul li{width:30px;height:30px;line-height:30px;float:left;margin-left:40px;font-size:24px;border:1px solid #666;text-align:center;cursor:pointer;}  
#box .page ul .active{background:#ccc;}  
</style>  
</head>  
<body>  
<div id="box">  
    <div class="con"></div>  
    <div class="page">  
        <ul>  
            <li class="active">1</li>  
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
            <li>5</li>  
            <li>6</li>  
        </ul>  
    </div>  
</div>  
<script type="text/javascript">  
//加载第一页  
window.onload=function(){  
    var url1='https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page=1&num=8'  
    inteData(url1);  
}  
function inteData(url){  
    var xmlhttp=new XMLHttpRequest();  
    var str="";  
    xmlhttp.onreadystatechange=function(){  
        if(this.readyState==4&&this.status==200){  
        myArr = JSON.parse(this.responseText);  
        for(var i=0;i<myArr.showapi_res_body.newslist.length;i++){  
            str +=  
            `  
            <a class="item" href="${myArr.showapi_res_body.newslist[i].url}">  
                <img src=/uploadfile/2017/1212/20171212101806314.jpg">  
                <div class="test">  
                    <p>${myArr.showapi_res_body.newslist[i].title}</p><div class="ft">></div>  
                </div>  
            </a>    
            `  
            document.querySelector('.con').innerHTML=str  
            }  
        }     
    }  
    xmlhttp.open("GET",url,true)  
    xmlhttp.send();  
}  
//点击更新URL地址  
var list = document.getElementsByTagName("li");  
for(var i = 0;i<list.length;i++){  
list[i].onclick = function(){  
    var url ="https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page="+this.innerHTML+"&num=8";  
    inteData(url);  
    }     
}   
</script>  
  
</body>  
</html>

jq实现效果

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style type="text/css">  
*{margin:0;padding:0;}  
li{list-style:none;}  
#box{width:500px;height:640px;border:1px solid #ccc;position:relative;top:50%;left:50%;margin:20px -250px;}  
#box .con{width:500px;height:560px;}  
#box .con .item{height:59px;margin:10px 0;border-bottom:1px solid #ccc;display:block;cursor:pointer;}  
#box .con .item img{width:60px;height:50px;float:left;display:block;margin-left:10px;}  
#box .con .item .test{width:400px;height:50px;float:right;}  
#box .con .item .test p{width:300px;font-size:16px;color:#333;text-align:left;display:inline-block;white-space: nowrap;overflow: hidden;text-overflow:ellipsis}  
#box .con .item .test .ft{width:50px;height:50px;line-height:50px;font-size:20px;color:#333;text-decoration:center;display:inline-block;float:right;}  
#box .page{width:500px;height:31px;}  
#box .page ul{height:31px;margin-top:10px;}  
#box .page ul li{width:30px;height:30px;line-height:30px;float:left;margin-left:40px;font-size:24px;border:1px solid #666;text-align:center;cursor:pointer;}  
#box .page ul .active{background:#ccc;}  
</style>  
</head>  
<body>  
<div id="box">  
    <div class="con"></div>  
    <div class="page">  
        <ul>  
            <li class="active">1</li>  
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
            <li>5</li>  
            <li>6</li>  
        </ul>  
    </div>  
</div>  
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
    url="https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page=1&num=8";  
    inteData(url);  
})  
  
function inteData(add){  
    $.ajax({url:add,success:function(myArr){  
        console.log(myArr)  
        var str=""  
        for(var i=0;i<myArr.showapi_res_body.newslist.length;i++){  
            str +=  
            `  
            <a class="item" href="${myArr.showapi_res_body.newslist[i].url}">  
                <img src=/uploadfile/2017/1212/20171212101806314.jpg">  
                <div class="test">  
                    <p>${myArr.showapi_res_body.newslist[i].title}</p><div class="ft">></div>  
                </div>  
            </a>    
            `  
            }  
            $(".con").html(str)  
                      
        }  
    })  
}     
$("ul li").click(function(){  
    $(this).addClass("active").siblings().removeClass("active")  
    url="https://route.showapi.com/181-1?showapi_appid=30603&showapi_sign=98960666afeb4992ae91971d13494090&page="+$(this).index()+1+"&num=8";  
    inteData(url);  
});   
  
     
</script>  
  
</body>  
</html>

点击复制链接与好友分享!回本站首页