jQuery的ajax获取数据渲染页面

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

使用jQueryAjax功能可以在前端页面异步地向Java后台服务器请求数据并显示。以下是基本流程: 1. 创建HTML表单结构用于展示数据: ```html <table id="data-table"> <!-- 表格行将在这里动态加载 --> </table> <div id="pagination"> <!-- 分页控件将放在这里 --> </div> ``` 2. 使用JavaScript(包括jQuery)发送GET请求到后端接口,比如`/TestServlet/controller/ListFileServlet`[^2]: ```javascript $('#fetchDataButton').click(function() { $.ajax({ url: "http://localhost:8080/TestServlet/controller/ListFileServlet", type: 'GET', success: function(data) { // 数据返回后,处理数据并在表格中显示 displayDataInTable(data); }, error: function(xhr, textStatus, error) { console.error("Error:", error); // 处理错误情况 } }); }); ``` 3. 函数`displayDataInTable(data)`负责解析返回的数据并插入到表格中: ```javascript function displayDataInTable(data) { var tableBody = $('#data-table tbody'); tableBody.empty(); // 清空现有内容 for (var i = 0; i < data.length; i++) { var row = $("<tr/>"); row.append("<td>" + data[i].fileName + "</td>"); // 假设数据对象有一个名为"fileName"的属性 row.append("<td><a href='" + data[i].downloadUrl + "' download>" + "下载" + "</a></td>"); tableBody.append(row); } // 实现分页逻辑,如果存在分页数据,可以根据当前页数计算并显示对应的数据范围 } ``` 4. 如果有文件名和下载地址的数据,可以像这样在控制台中打印,实际应用中通常会替换为渲染页面上的元素。 注意,这只是一个基础示例,实际开发中可能还需要考虑更多的细节,如错误处理、状态码检查以及更复杂的分页逻辑。此外,CSV文件的处理可能需要额外的库来解析。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值