ajax点击搜索返回所需数据

html 中body设置(css设置跟进自身需求)

<p id='search_head'>学生信息查询表</p>

<div id="div_1">

<div class="search_div">

<div class="search_div_item">

<label >学生姓名:</label>

<input type="text" id="search_name" >

</div >

<div class="search_div_item">

<label >联系电话:</label>

<input type="text" id="search_phone" >

</div>

<div class="search_div_item_end">

<label style="color:#f2f2f2 ;">搜索</label>

<input type="submit" id="search_but" value="搜索">

</div>

<div class="search_div_item_end">

<label style="color:#f2f2f2 ;">查询全部学员</label>

<input type="submit" id="search_all_but" value="查询全部学员">

</div>

<div class="search_div_item_end">

<label style="color:#f2f2f2 ;">重置</label>

<input type="submit" id="search_back_but" value="重置">

</div>

</div>

<div id="table_div">

<table id='students_table'>

<thead>

<tr>

<th>学生姓名</th>

<th>联系电话</th>

<th>性别</th>

<th>年级</th>

<th>备注</th>

</tr>

</thead>

<tbody>

<!-- 表格内容将通过Ajax动态添加 -->

</tbody>

</table>

</div>

</div>

为查询键设置点击事件

javascript 复制代码
$("#search_but").click(function () {
	var s_name=$("#search_name").val();
	var s_phone=$("#search_phone").val();
	$.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.name == s_name  ){ 
					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);							
					}else if(item.phone==s_phone){
					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);					
					}else{
					};

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

效果

相关推荐
ModestCoder_31 分钟前
将一个新的机器人模型导入最新版isaacLab进行训练(以unitree H1_2为例)
android·java·机器人
robin_suli1 小时前
Spring事务的传播机制
android·java·spring
ps酷教程2 小时前
OkHttp&HttpClient
okhttp·httpclient
鸿蒙布道师2 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
Harrison_zhu3 小时前
Ubuntu18.04 编译 Android7.1代码报错
android
CYRUS STUDIO5 小时前
Unidbg Trace 反 OLLVM 控制流平坦化(fla)
android·汇编·算法·网络安全·逆向·ollvm
扫地的小何尚5 小时前
NVIDIA工业设施数字孪生中的机器人模拟
android·java·c++·链表·语言模型·机器人·gpu
顾林海7 小时前
深度解析ArrayList工作原理
android·java·面试
安静的海岸_AI7 小时前
Android端WIFI/流量共存技术方案
android
_一条咸鱼_7 小时前
Android Compose 框架进度指示器深入剖析(五十二)
android