jQuery的ajax获取数据渲染页面

最新推荐文章于 2025-07-14 20:11:55 发布

原创最新推荐文章于 2025-07-14 20:11:55 发布 · 2.5w 阅读

CC 4.0 BY-SA版权

一、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>