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

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

比如下面是所有学员信息

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

jQuery之ajax发送请求(table数据)_第1张图片前端,我们需要通过点击查询所有学员信息即可显示到下面列表中,

jQuery之ajax发送请求(table数据)_第2张图片给查询全部学员按钮设置点击事件,点击就发送请求

$("#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 = $("");
					if( item.grade == undefined  ){ } else{
					row.append($("" + item.name + ""));
					row.append($("" + item.phone + ""));
					row.append($("" + item.sex + ""));
					row.append($("" + item.grade + ""));
					row.append($("" + item.content + ""));
					table.append(row);					
					}

			});
		},
		error: function (xhr, status, error) {
		console.log("Request failed: " + error);
		}
	});
});

你可能感兴趣的:(ajax,jquery,ajax,前端)