jQuery之ajax发送请求(table数据)

一般后端给我们的数据是这样的

比如下面是所有学员信息

访问网址:http://localhost:8080/student/all

前端,我们需要通过点击查询所有学员信息即可显示到下面列表中,

给查询全部学员按钮设置点击事件,点击就发送请求

javascript 复制代码
$("#search_all_but").click(function () {
	$.ajax({
		url: "http://localhost:8080/student/all",       // 服务器端接口
		type: "GET",               // 请求类型
		dataType: "json",          // 数据类型
		success: function (data) {
			var table = $("#students_table");     // 获取表格元素
			table.find("tbody").empty();   // 清空表格内容
			// 遍历数据,动态添加行
			$.each(data, function (index, item) {
				// 性别转换
				if(item.sex==1){item.sex ="男"}
				else if(item.sex==2){item.sex ="女"}
				// 年级转换
				var grade={"1":"一年级","2":"二年级","3":"三年级","4":"四年级","5":"五年级","6":"六年级","7":"七年级","8":"八年级","9":"九年级","10":"高一年级","11":"高二年级","12":"高三年级"};
				item.grade=grade[String(item.grade)];
				var row = $("<tr></tr>");
					if( item.grade == undefined  ){ } else{
					row.append($("<td>" + item.name + "</td>"));
					row.append($("<td>" + item.phone + "</td>"));
					row.append($("<td>" + item.sex + "</td>"));
					row.append($("<td>" + item.grade + "</td>"));
					row.append($("<td>" + item.content + "</td>"));
					table.append(row);					
					}

			});
		},
		error: function (xhr, status, error) {
		console.log("Request failed: " + error);
		}
	});
});
相关推荐
OEC小胖胖4 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8887 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家7 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试