一、ajax的请求方式
post
$.ajax({
//请求方式
type:'POST',
//发送请求的地址
url:'xxxxxx',
//服务器返回的数据类型
dataType:'json',
//发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
data:{key1:value1,key2:value2},
success:function(data){
//请求成功函数内容
},
error:function(jqXHR){
//请求失败函数内容
}
});
get
$.ajax({
//请求方式
type:'GET',
//发送请求的地址以及传输的数据
url:'xxxxxx?参数'+=xxx,
//服务器返回的数据类型
dataType:'json',
success:function(data){
//请求成功函数内容
},
error:function(jqXHR){
//请求失败函数内容
}
});
二、页面列表的样式结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #f5f5f5;
}
.item{
width: 100%;
padding: 10px;
box-sizing: border-box;
background: #fff;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.item .item-title{
font-size: 16px;
line-height: 24px;
}
.item .item-content{
color: #9D9D9D;
margin-right: 20px;
}
</style>
</head>
<body>
<!--页面容器-->
<div id="container">
<!--每个条目-->
<div class="item">
<div class="item-title">作业名字</div>
<div>
<span class="item-content">创建时间</span>
<span class="item-content">发布老师</span>
</div>
</div>
</div>
</body>
</html>
效果如下
三、js代码的处理
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$.ajax({
//请求方式
type:'get',
//发送请求的地址
//我这里的地址是不需要传数据的，所以没有拼接参数
url:'https://api.myjson.com/bins/73fno',
//服务器返回的数据类型
dataType:'json',
//请求成功的处理
success:function(data){
console.log(data);
//获取需要的数据
var group = data.content;
//拼接字符串
var str = '';
//对数据做遍历，拼接到页面显示
for(var i=0;i<group.length;i++){
str += '<div class="item">'+
'<div class="item-title">'+ group[i].name +'</div>'+
'<div>'+
'<span class="item-content">'+ group[i].time +'</span>'+
'<span class="item-content">'+ group[i].teacher +'</span>'+
'</div>'+
'</div>';
}
//放入页面的容器显示
$('#container').html(str);
},
//请求失败的处理
error:function(jqXHR){
console.log(jqXHR);
}
});
</script>
控制台打印的数据
最终效果
四、总结
获取数据的方式有很多种，这只是其中一种，并且比较简单的把数据渲染到页面上。实际项目中还需要对获取的数据进行分页、筛选、判断等各种处理。
参考链接：https://blog.youkuaiyun.com/qq_33026699/article/details/82422963
扫一扫
428
到【灌水乐园】发言
