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);
		}
	});
});
相关推荐
安分小尧1 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员1 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪2 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya2 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81632 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef062 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪2 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin3 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan4 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君4 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss