使用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 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jquery向后台提交数组的代码分析
Feb 20 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 数据库树的遍历方法
2009/02/06 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
JSONP基础知识详解
2017/03/19 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
全面了解python字符串和字典
2016/07/07 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
详解Python发送email的三种方式
2018/10/18 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
干部行政关系介绍信
2014/01/17 职场文书
法制宣传日活动总结
2014/04/29 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
小学教师师德整改措施
2014/09/29 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2015年售票员工作总结
2015/04/29 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers