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 小时前
手写 zustand
前端
Hamm2 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇3 小时前
前端国际化看这一篇就够了
前端
大G哥3 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext3 小时前
html初识
前端·html
小小小小宇3 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827523 小时前
vue中 vue.config.js反向代理
前端
Java&Develop3 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk3 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务
摆烂工程师3 小时前
全网最详细的5分钟快速申请一个国际 “edu教育邮箱” 的保姆级教程!
前端·后端·程序员