jquery ajax实现省市二级联动
2017-08-19 14:27
288 查看
今天给大家带来使用jQuery ajax实现的省市联动效果。我们直奔主题,先说下实现思路:
provience表
city表
这里使用provience表的主键作为city表的外键,等下依据省份的id查找相应的市区
BaseDao.java
ProvinceDaoImpl继承自BaseDao,在该类中封装了getAllProvince和getCitiesByProvinceId这两个方法。顾名思义,就是查询全部省市和更具省份id查找城市。
ProvinceJsonServlet
这里就是一个查询全部的省份。然后将其转换成json对象。然后将该json对象返回给client,这里须要用到以下一些jar文件:
commons-beanutils.jar
commons-collections.jar
commons-lang.jar
commons-logging.jar
ezmorph-1.0.6.jar
json-lib-2.3-jdk15.jar
CityJsonServlet
在CityServlet中依据client通过jQuery ajax传递过来的省份id,(这里如果client传递的參数名称是”provinceId”),查询旗下的城市,然后转换成json对象,返回给client。
注意:一定记得在web.xml中配置这两个servlet
在jsp页面内容例如以下:
这里我使用了两个div来显示省份和城市。
首先我们须要在页面载入完成之前就要载入全部的省份,所以须要使用到页面载入函数:
记得引入jQuery文件哈。这里我在页面载入函数中查询全部的省份,请求ProvinceJsonServlet,由于不须要传递不论什么參数。全部參数填写null,在回调函数中的data就是server返回给前端的数据。
我们先将该data打印出来看下是否正确.
http://localhost:8080/jqueryajax/index.jsp
能够看到在页面载入之前已经正确的载入了全部的省份。
接下来就是依据这些数据构造一个select选择器。完整的回调函数,例如以下:
这里须要注意一定要使用eval(“(“+data+”)”);函数。这是由于server返回给我们的是json格式的字符串,我们须要使用eval()函数将其转换成json数组。而且为该select设置了onchange方法,在改方法中传递的參数就是当前选中的省份的id。
在loadCities方法中使用jquery的post方法请求CityJsonServlet,而且传递了一个provinceId作为參数。而且设置自己定义的回调函数loadCityCallback,在该回调函数中首先通过alert查看数据是否正确.
当选择不同的省份,弹出的数据也是不同的,说明server返回给我们的json字符串是正确的。
接下来和省份一样。依据json字符串构造页面:
效果例如以下:
源代码下载
准备数据
这里数据库我使用的是mysql,先看下表格:provience表
city表
这里使用provience表的主键作为city表的外键,等下依据省份的id查找相应的市区
查询方法的封装
接下来就是实现查询全部省市以及依据省份id查找相应的城市的方法,这里我写了一个BaseDao封装了一些主要的数据库链接以及关闭连接的方法:BaseDao.java
package com.jqueryajax.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; public class BaseDao { private static final String DRIVER = "com.mysql.jdbc.Driver"; private static final String URL = "jdbc:mysql://localhost:3306/ajax? useUnicode=true&characterEncoding=UTF-8"; private static final String USERNAME = "root"; private static final String PASSWORD = "root"; private Connection conn; private PreparedStatement psmt; public ResultSet rs; /** * 获取连接 alt+shift+z:捕获异常 */ public void getConn() { try { Class.forName(DRIVER); conn = DriverManager.getConnection(URL, USERNAME, PASSWORD); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } } /** * 释放资源 */ public void closeAll() { try { if (rs != null) rs.close(); if (psmt != null) psmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); } } /** * 运行查询的方法 * * @param sql * :运行的SQL语句 * @param parmms * :占位符的值 * @return 封装数据的结果集 String * */ public ResultSet execQuery(String sql, String[] params) { getConn(); try { psmt = conn.prepareStatement(sql);// 创建PreparedStatement对象。运行增,删,改,查 if (params != null && params.length > 0) { for (int i = 0; i < params.length; i++) { psmt.setString(i + 1, params[i]);// psmt.setString(1,"aa"); } } rs = psmt.executeQuery(); } catch (SQLException e) { e.printStackTrace(); } return rs; } }
ProvinceDaoImpl继承自BaseDao,在该类中封装了getAllProvince和getCitiesByProvinceId这两个方法。顾名思义,就是查询全部省市和更具省份id查找城市。
package com.jqueryajax.dao.impl; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.jqueryajax.dao.BaseDao; import com.jqueryajax.entity.City; import com.jqueryajax.entity.Province; public class ProvinceDaoImpl extends BaseDao{ public List<Province> getAllProvince() { List<Province> list = new ArrayList<Province>(); String sql="select * from province"; rs = this.execQuery(sql, null); try { while(rs.next()){ Province province = new Province(); province.setProvinceId(rs.getInt("provinceId")); province.setProvinceName(rs.getString("provinceName")); list.add(province); } } catch (SQLException e) { e.printStackTrace(); }finally{ this.closeAll(); } return list; } public List<City> getCitiesByProvinceId(int provinceId) { List<City> list = new ArrayList<City>(); String sql="select * from city where provinceId="+provinceId; rs = this.execQuery(sql, null); try { while(rs.next()){ City city = new City(); city.setCityId(rs.getInt("cityId")); city.setCityName(rs.getString("cityName")); city.setPersonSize(rs.getInt("personSize")); city.setCityArea(rs.getInt("cityArea")); city.setPlace(rs.getString("place")); city.setProvinceId(rs.getInt("provinceId")); list.add(city); } } catch (SQLException e) { e.printStackTrace(); }finally{ this.closeAll(); } return list; } }
创建Servlet处理用户请求
接下来实现两个Servlet:ProvinceJsonServlet和CityJsonServlet用来处理用户的请求:ProvinceJsonServlet
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8");//设置响应的内容格式 PrintWriter out = response.getWriter(); ProvinceDaoImpl provinceDao = new ProvinceDaoImpl(); List<Province> list = provinceDao.getAllProvince();//查询全部的省份 //[{"provinceId":1,"provinceName":"陕西省"},...] JSONArray jsonArray = JSONArray.fromObject(list); System.out.print(jsonArray); out.print(jsonArray); }
这里就是一个查询全部的省份。然后将其转换成json对象。然后将该json对象返回给client,这里须要用到以下一些jar文件:
commons-beanutils.jar
commons-collections.jar
commons-lang.jar
commons-logging.jar
ezmorph-1.0.6.jar
json-lib-2.3-jdk15.jar
CityJsonServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8");//设置响应的内容格式 PrintWriter out = response.getWriter(); ProvinceDaoImpl provinceDao = new ProvinceDaoImpl(); //依据省份ID查询旗下的城市 String provinceIdStr = request.getParameter("provinceId"); int provinceId = Integer.parseInt(provinceIdStr); List<City> list = provinceDao.getCitiesByProvinceId(provinceId); JSONArray jsonArray = JSONArray.fromObject(list); out.print(jsonArray); }
在CityServlet中依据client通过jQuery ajax传递过来的省份id,(这里如果client传递的參数名称是”provinceId”),查询旗下的城市,然后转换成json对象,返回给client。
注意:一定记得在web.xml中配置这两个servlet
前端页面
如今万事俱备仅仅欠东风,開始编写我们的前端页面,这里就不使用css美化页面了,我们今天的主要任务是使用jQuery ajax请求,并在回调函数中处理该请求。在jsp页面内容例如以下:
<body> <div id="province"></div> <div id="city"></div> </body>
这里我使用了两个div来显示省份和城市。
首先我们须要在页面载入完成之前就要载入全部的省份,所以须要使用到页面载入函数:
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.get("ProvinceJsonServlet", null, function(data){ alert("Data Loaded: " + data); }); }); </script>
记得引入jQuery文件哈。这里我在页面载入函数中查询全部的省份,请求ProvinceJsonServlet,由于不须要传递不论什么參数。全部參数填写null,在回调函数中的data就是server返回给前端的数据。
我们先将该data打印出来看下是否正确.
http://localhost:8080/jqueryajax/index.jsp
能够看到在页面载入之前已经正确的载入了全部的省份。
接下来就是依据这些数据构造一个select选择器。完整的回调函数,例如以下:
function(data){ //alert("Data Loaded: " + data); var optionHTML="<select name=\"province\" onchange=\"loadCities(this.value)\">"; var data = eval("("+data+")"); for(var i=0;i<data.length;i++){ var province = data[i]; //alert(province.provinceId); optionHTML+="<option value=\""+province.provinceId+"\">"+province.provinceName+"</option>"; } optionHTML+="</select>"; $("#province").html(optionHTML);//将数据填充到省份的下拉列表中 });
这里须要注意一定要使用eval(“(“+data+”)”);函数。这是由于server返回给我们的是json格式的字符串,我们须要使用eval()函数将其转换成json数组。而且为该select设置了onchange方法,在改方法中传递的參数就是当前选中的省份的id。
function loadCities(cityId) { $.post("CityJsonServlet", {provinceId:cityId}, loadCityCallback ); } function loadCityCallback(data) { alert(data); }
在loadCities方法中使用jquery的post方法请求CityJsonServlet,而且传递了一个provinceId作为參数。而且设置自己定义的回调函数loadCityCallback,在该回调函数中首先通过alert查看数据是否正确.
当选择不同的省份,弹出的数据也是不同的,说明server返回给我们的json字符串是正确的。
接下来和省份一样。依据json字符串构造页面:
function loadCityCallback(data) { //alert(data); var data = eval("("+data+")"); var cityHTML=""; for(var i=0;i<data.length;i++){ var city = data[i]; cityHTML+="<p><b>"+city.cityName+"</b></p>"; cityHTML+="人口:"+city.personSize+",面积:"+city.cityArea+"<br>"; cityHTML+="名胜:"+city.place+"<br>"; } $("#city").html(cityHTML); }
效果例如以下:
源代码下载
相关文章推荐
- jquery ajax实现省市二级联动
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- jquery+json+struts实现省市二级联动
- 基于javascript实现全国省市二级联动下拉选择菜单
- Struts2+jQuery+ajax+mySql实现省市二级联动
- picker控件详解与使用,(实现省市的二级联动)
- 用js解析xml实现省市二级联动
- jquery ajax实现省市县3级联动
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
- jQuery ajax实现省市县三级联动
- Ajax实现省市二级联动示例
- JQuery EasyUI Combobox 实现省市二级联动菜单
- js实现的全国省市二级联动下拉选择菜单完整实例
- 使用Json实现省市二级联动
- Ajax实现省市二级联动(源代码)
- EasyUI+MySQL+Struts2实现省市二级联动
- js实现省市选择二级联动
- vue学习之mintui picker选择器实现省市二级联动
- vue学习之mintui picker选择器实现省市二级联动示例
- jquery实现省市二级联动