使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例


Posted in jQuery onJanuary 25, 2018

首先我们需要先建立好数据库,将一些数据插入进去

需要两张表:

province:省份表

city: 城市表

如图:

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

然后再在java中建立相关的实体类与之对应

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

再然后,我们就能开始做jdbc的操作了

public class ConnectionFactory { 
 private static String driver; 
 private static String url; 
 private static String user; 
 private static String password; 
 static { 
  Properties prop = new Properties(); 
  //读取文件 
   
  try { 
   InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties"); 
    
   prop.load(in); 
   driver = prop.getProperty("jdbc.driver"); 
   url = prop.getProperty("jdbc.url"); 
   user = prop.getProperty("jdbc.user"); 
   password = prop.getProperty("jdbc.password"); 
  } catch (IOException e) { 
   e.printStackTrace(); 
  } 
   
 } 
  
 /** 
  * 获取连接对象 
  * @return 
  */ 
 public static Connection getConnection(){ 
  Connection conn = null; 
   
  try { 
   Class.forName(driver); 
   conn = DriverManager.getConnection(url, user, password); 
    
  } catch (Exception e) { 
   throw new RuntimeException(e); 
  } 
   
  return conn; 
 } 
  
 /** 
  * 关闭资源 
  * @param conn 
  * @param pstmt 
  * @param stmt 
  * @param rs 
  */ 
 public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){ 
    
   try { 
    if (conn != null) { 
     conn.close(); 
    } 
     
    if (pstmt != null) { 
     pstmt.close(); 
    } 
     
    if (stmt != null) { 
     stmt.close(); 
    } 
     
    if (rs != null) { 
     rs.close(); 
    } 
   } catch (SQLException e) { 
    throw new RuntimeException(e); 
   } 
   
 }

首先我们可以在页面加载的时候获取所有省份的信息,SQL语句如下

Connection conn = null; 
 PreparedStatement pstmt = null; 
 Province province2 = null; 
  
 @Override 
 public ArrayList<Province> findAllPro() { 
  ResultSet rs = null; 
  ArrayList<Province> pros = null; 
  try { 
   String sql = "select id,place from province"; 
   conn = ConnectionFactory.getConnection(); 
   pstmt = conn.prepareStatement(sql); 
   pros = new ArrayList<Province>(); 
    
   rs = pstmt.executeQuery(); 
    
   while(rs.next()){ 
    Province province = new Province(); 
    province.setId(rs.getInt(1)); 
    province.setPlace(rs.getString(2)); 
    pros.add(province); 
   } 
    
  } catch (SQLException e) { 
   throw new RuntimeException(e); 
  } 
   
  return pros; 
 }

将查到的数据放到后台,建立一个SelectedServlet类,用于接收查询到的所有省份的信息

response.setContentType("application/json;charset=utf-8"); 
  response.setCharacterEncoding("utf-8"); 
  request.setCharacterEncoding("utf-8"); 
  //创建一个Place对象 
  ArrayList<Province> pros= new Place().findAllPro(); 
  PrintWriter out = response.getWriter(); 
  //将集合直接转换为Json对象 
  out.write(JSONArray.fromObject(pros).toString());

在这里会用到集合转换Json对象,我们需要导入以下几个包

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

然后我们开始写前台页面:

<body> 
  省份:<select id="province"> 
   <option>--请选择省份--</option> 
  </select> 
   
  城市:<select id="city"> 
    <option>--请选择城市--</option> 
   </select> 
  <br/><br/> 
  <span></span> 
 </body>

然后jQuery代码如下:(由于我导入的jQuery版本比较低,所以使用的方法是getJSON,而不是getJson)

$.getJSON("SelectedServlet",function(data,textStatus){ 
 var provinces = data; 
      
 var res = ""; 
 for(var i =0;i<provinces.length;i++){ 
 <span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>"; 
 } 
  $("#province").append(res); 
 });

这样就能在页面加载的时候获取到数据

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

然后我们再来做联动,首先给下拉框添加一个change事件,然后获取选中的信息,将选中的信息发送到另一个CityServlet中

//下拉框改变时触发的事件 
 $("#province").change(function(){ 
 var seled = $("option:selected").html(); 
      
 $("span").html(seled); 
 $.getJSON("CityServlet",{ 
  "province":encodeURI(encodeURI(seled)) 
     },function(data){ 
  $("#city").html(""); 
  var citys = data; 
  var res = ""; 
  for(var i = 0;i<citys.length;i++){ 
   res += "<option>"+citys[i].place+"</option>"; 
  } 
  $("#city").append(res); 
 }); 
      
 });

服务器通过获得的信息通过sql语句查询出来,SQL代码如下:

public ArrayList<City> findAllCityByPro(String name) { 
  ResultSet rs = null; 
  ArrayList<City> citys = null; 
  try { 
   //通过名字获得所有值 
   String sql = "select c.city_place from city c ," 
     + "province p where c.province_id = " 
     + " (select id from province where place = '"+ name +"') " 
     + " and c.province_id = p.id"; 
   conn = ConnectionFactory.getConnection(); 
   pstmt = conn.prepareStatement(sql); 
   citys = new ArrayList<City>(); 
   System.out.println(sql); 
   rs = pstmt.executeQuery(); 
    
   while(rs.next()){ 
    City city = new City(); 
    city.setPlace(rs.getString(1)); 
    citys.add(city); 
   } 
   System.out.println(citys); 
    
  } catch (SQLException e) { 
   e.printStackTrace(); 
  } 
   
  return citys; 
 }

将查询到的数据发送到后台,后台接收到数据后将其转换为Json对象,并通过回调函数发送到前台,然后前台就可以通过事件直接获取到数据,而不用各种跳转页面,这就是Ajax(Asynchronous Javascript And XML),

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  response.setContentType("application/json;charset=utf-8"); 
  response.setCharacterEncoding("utf-8"); 
  request.setCharacterEncoding("utf-8"); 
//  String proName = "浙江"; 
  String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"), 
    "utf-8"); 
  ArrayList<City> citys= new Place().findAllCityByPro(proName); 
  PrintWriter out = response.getWriter(); 
  out.write(JSONArray.fromObject(citys).toString()); 
   
 }

至于显示页面的代码也在前面写到jQuery语句中了

效果如下:

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

以上这篇使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 #jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 #jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 #jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
You might like
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
详解Django通用视图中的函数包装
2015/07/21 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python tornado微信开发入门代码
2018/08/24 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
运动会主持词大全
2015/07/02 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers