根据下拉框条件发送ajax请求筛选所显示的信息，附带模糊查询搜索框

最新推荐文章于 2024-06-28 15:00:36 发布

woshi_yugu

最新推荐文章于 2024-06-28 15:00:36 发布

阅读量619

点赞数

文章标签： javascript jquery html ajax

本文链接：https://blog.csdn.net/weixin_44754956/article/details/112859131

版权

本文介绍了如何使用前端Bootstrap构建一个下拉筛选菜单，通过AJAX实现动态搜索和特定日期范围的跳转。详细展示了`<div>`, `<button>`, `<ul>`元素的组合，并演示了`search()`和`toEdit()`方法的运用，配合后台数据的动态加载。

摘要由CSDN通过智能技术生成

前端控件构造：

	<div class="dropdown form-inline">
	  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
	    筛选结果
	    <span class="caret"></span>
	  </button>
	  <ul  class="dropdown-menu" aria-labelledby="dropdownMenu1">
	    <li  data-value="1"><a class="btn" title="记录" onclick="toEdit(1)">入职一个月以内</a></li >
	    <li  data-value="2"><a class="btn" title="记录" onclick="toEdit(2)">入职半年以内</a></li >
	    <li  data-value="3"><a class="btn" title="记录" onclick="toEdit(3)">入职一年以内</a></li >
	  </ul>
	  <input type="text" class="form-control" id="searchText" placeholder="请输入姓名关键字" />
      <button class="btn btn-primary" id="find_btn">搜 索</button>
	</div>

提供给控件调用的方法：

/* 点击搜索框，对数据进行模糊查询 */
/* 		$(document).on("click","#find_btn",function(){ */
		$("#find_btn").click(function(){
				search();
		});
		//搜索功能,提交ajax数据到后台
		function search() {
			//1、获取搜索关键字
			var searchKey = document.getElementById("searchText").value;
			if (searchKey != "") {
				//发送ajax请求搜索
				$.ajax({
					url : "${request}/emps/" + searchKey,
					type : "GET",
					success : function(res) {
						//1、解析并显示员工数据
						build_emps_table(res);
						//2、解析并显示分页信息
						build_page_info(res);
						//3、解析显示分页条数据
						build_page_nav(res);
					}
				});
			}
		}
		function toEdit(value){
			var date;
			if(value==1){
				date=1;
			}else if(value==2){
				date=6;
			}else{
				date=12;
			}
			$.ajax({
	         		type: "GET",
	         		url:"${request}/empss/" + date,
					success : function(res) {
					//1、解析并显示员工数据
					build_emps_table(res);
					//2、解析并显示分页信息
					build_page_info(res);
					//3、解析显示分页条数据
					build_page_nav(res);
					}
				});
			}