使用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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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
php 过滤危险html代码
2009/06/29 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
从vue源码看props的用法
2019/01/09 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python实现转圈打印矩阵
2019/03/02 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
普通党员个人整改措施
2014/10/27 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python