通过Ajax+jquery实现的动态增加一组查询条件的实例
来源:互联网 发布:南京碎尸案 知乎 编辑:程序博客网 时间:2024/04/27 14:41
我们在做信息搜索的时候,可能会需要动态的添加一组搜索条件,如下图(1),我们可能需要同时想搜索 海南省海口市秀英区 以及 山西省太原市太原理工大学 的信息,甚至更多的省市区学校的条件约束,那么,我们就需要动态地“再添加一组省市区学校条件”。点击“再添加一组省市区学校条件”,则新增了一组控件可供选择。如下图(2)。
图(1)
图(2)
那么,在客户端的多组同样的查询条件,在服务器端通过一组组的name值去获取数据显然不够合理,更合理的做法是通过设置隐藏域,每个select元素改变了选择的值后,便触发事件将所有当前的省市区学校条件的数据拼串,在提交数据后,将隐藏域数据提交至服务器端再通过一定规则劈串便获取到了所有的查询条件数据。
为了展示效果, 以下是我将该隐藏域type值设定为text后的结果图:
我的拼串规则是,将省份 市 区 和 学校 的ID值通过“,”号分开,而组与组之间,也就是不同组的省市区学校条件之间通过“|”分割。当然,没有选中值的地方,当然为空串。所以以上的结果为“10,10001,100010001,|27,27001,,270010002”。
大家注意到上图的右下角红圈的“关闭本组”了吧,这是对新增的组别里才有的功能,通过它可以关闭掉当前组的条件,显然,关闭后以前选中的条件则无效,隐藏域的串得重新拼。
以上是功能的大体介绍,在这里说明一点,市和区和学校的信息都是使用AJAX技术动态地从数据库中取的。 好,下面我把以上功能的核心代码粘贴如下,由于项目所限,无法粘贴该功能以外的代码,如果你需要借鉴,请细心分析代码结构。
JSP代码:
JS代码:
获取市区学校信息的ACTION代码:
CityAction.java-------
AreaAction.java------
------------------------------------------
以上就是核心代码,也许有朋友会问,为什么会有这样的代码:
这里不是要查询最后一个id为province的元素吗,那么直接 $("#province:last") 不就行了吗?是的,我也曾经想过并尝试过,但是结果是无法正确实现的,每次都是前一个元素的ID值被改了,而不是新增的。所以我换成了这种办法去实现。有更好解释和办法或者有其他疑问的朋友欢迎前来交流。
----------------------
欢迎大家加入我创建的Java魔鬼编程QQ群,群号:253042038
专注Java开发及其相关领域技术。致力于多线程、大并发、高性能、海量数据研究和学习。欢迎加入一起学习讨论。
个人博客地址:http://wangchongan.com
- 通过Ajax+jquery实现的动态增加一组查询条件的实例
- 动态的添加条件实现查询
- ajax+jquery+flea+smarty实现了通过选择下拉列表动态显示相应的数据
- jquery ajax 实现动态联动查询
- JQuery的ajax实例
- JQuery的ajax实例
- mybatis的动态条件查询
- 关于动态实现自定义查询条件的方案
- Springboot整合JPA以及动态条件查询的实现
- jQuery实现表格行的动态增加与删除
- jQuery实现表格行的动态增加与删除
- 使用Jquery动态的实现增加/删除单选题
- 实现表单的提交通过jquery的ajax
- AJAX 的简单实例 (JS实现 和JQuery 实现)
- ajax+jQuery+thinkphp实现动态下拉表的实现
- 从翻页条件查询列表及其详情页动态切换,免于条件携带的实现方案
- Ajax的async属性(通过ajax请求分页查询实例)
- 润乾报表通过ajax实现参数的动态过滤
- 各种下载资源网址。
- xml格式获取值
- Google AI Challenge
- 在此放下我的一只鞋子
- 字符串的操作
- 通过Ajax+jquery实现的动态增加一组查询条件的实例
- 什么是交叉编译
- 没有钱的爱情能爱多久~(看完无语。。。。)
- 2010年最骚最贱最有深度的100句话!!!
- Mysql UTF8 转为 GB2312
- http://www.nanjim.com
- 线程池版的SocketServer
- Eclipse 3.6M5 发布 新增动态路径变量等特性
- ExtractStrings函数使用例子