ajax点击搜索返回所需数据

 html 中body设置（css设置跟进自身需求）

    

学生信息查询表

    

        

            

            学生姓名：                
            
            

            

            
            联系电话：
            
            

    
            

            搜索
            
            

            

            查询全部学员
            
            

            

            重置
            
            

        

        

        
            
                
                    
                    
                    
                    
                    
                
            
            
            
            
        

学生姓名	联系电话	性别	年级	备注

        

    

 

 为查询键设置点击事件

$("#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 = $("");
					// 条件判断
					if( item.name == s_name  ){ 
					row.append($("" + item.name + ""));
					row.append($("" + item.phone + ""));
					row.append($("" + item.sex + ""));
					row.append($("" + item.grade + ""));
					row.append($("" + item.content + ""));
					table.append(row);							
					}else if(item.phone==s_phone){
					row.append($("" + item.name + ""));
					row.append($("" + item.phone + ""));
					row.append($("" + item.sex + ""));
					row.append($("" + item.grade + ""));
					row.append($("" + item.content + ""));
					table.append(row);					
					}else{
					};

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

 效果