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);
		}
	});
});	

效果

相关推荐
西瓜本瓜@2 小时前
在Android中如何使用Protobuf上传协议
android·java·开发语言·git·学习·android-studio
似霰5 小时前
安卓adb shell串口基础指令
android·adb
fatiaozhang95278 小时前
中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包
android·adb·电视盒子·魔百盒刷机·魔百盒固件
CYRUS_STUDIO9 小时前
Android APP 热修复原理
android·app·hotfix
鸿蒙布道师9 小时前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师9 小时前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
大耳猫9 小时前
【解决】Android Gradle Sync 报错 Could not read workspace metadata
android·gradle·android studio
ta叫我小白10 小时前
实现 Android 图片信息获取和 EXIF 坐标解析
android·exif·经纬度
dpxiaolong11 小时前
RK3588平台用v4l工具调试USB摄像头实践(亮度,饱和度,对比度,色相等)
android·windows
tangweiguo0305198712 小时前
Android 混合开发实战:统一 View 与 Compose 的浅色/深色主题方案
android