html（隐藏域）＜input type=“hidden“ id=““/＞用法

最新推荐文章于 2025-07-26 23:33:57 发布

原创最新推荐文章于 2025-07-26 23:33:57 发布 · 5.6k 阅读

9 ·

CC 4.0 BY-SA版权

web前端基础知识专栏收录该内容

18 篇文章

订阅专栏

当在前端页面的查询框输入条件但未点击查询时，页面翻页仍会自动应用输入条件进行过滤。为解决此问题，可以使用隐藏域保存查询条件。在查询按钮点击事件中，将搜索框内容存入隐藏域，而在分页时从隐藏域读取并恢复到搜索框，确保未点击查询时不触发自动查询。这样，只有在点击查询按钮时才会应用查询条件。

解决一个前端页面查询的方法：

问题介绍：

（1）中描述不添加查询条件，那就查询所有，之后点击查询。

（2）查询结果数据库中一共有10条记录，每页分两条共五页。

（1）这个在名称出输入 2。

（2）但是不点击查询。

（3）点击下一页或者第2...3页等等。

（4）看查询结果发生改变，它自己会查询名称带“2”的信息。

总结：其实我们没有点击查询，只是在查询栏的名称处输入了“2”，但是当我们想查看下一页的时候它会自动查询名称带“2”的信息。

那么怎么解决这类问题呢？

很简单：就是加入一下隐藏域。

      <input type="hidden" id="hidden-name"/>
      <input type="hidden" id="hidden-owner"/>
      <input type="hidden" id="hidden-startDate"/>
      <input type="hidden" id="hidden-endDate"/>

$("#searchBtn").click(function () {

			/*

			点击查询按钮的时候，我们应该将搜索框中的信息保存起来，保存到隐藏域中

			 */

			$("#hidden-name").val($.trim($("#search-name").val()));
			$("#hidden-owner").val($.trim($("#search-owner").val()));
			$("#hidden-startDate").val($.trim($("#search-startDate").val()));
			$("#hidden-endDate").val($.trim($("#search-endDate").val()));

			pageList(1,2);


		})

function pageList(pageNo,pageSize) {

		//查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
		$("#search-name").val($.trim($("#hidden-name").val()));
		$("#search-owner").val($.trim($("#hidden-owner").val()));
		$("#search-startDate").val($.trim($("#hidden-startDate").val()));
		$("#search-endDate").val($.trim($("#hidden-endDate").val()));

更改完之后的效果就是我们只要不点击查询，那么他就不会自己查。