Ajax实现省市区三级级联详解

小云云
发布: 2018-01-12 13:28:34
原创
1615人浏览过

本文主要为大家详细介绍了ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

实现Ajax实现省市区三级级联,需要Java解析json技术
整体Demo下载地址如下: 点我下载

address.html


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

 

 <script type="text/javascript">

 

  /**

   * 得到XMLHttpRequest对象

   */

  function getajaxHttp() {

   var xmlHttp;

   try {

    // Firefox, Opera 8.0+, Safari

    xmlHttp = new XMLHttpRequest();

   } catch (e) {

    // Internet Explorer

    try {

     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

     try {

      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

     } catch (e) {

      alert("您的浏览器不支持AJAX!");

      return false;

     }

    }

   }

   return xmlHttp;

  }

  /**

   * 发送ajax请求

   * url--请求到服务器的URL

   * methodtype(post/get)

   * con (true(异步)|false(同步))

   * functionName(回调方法名,不需要引号,这里只有成功的时候才调用)

   * (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象)

   */

  function ajaxrequest(url, methodtype, con, functionName) {

   //获取XMLHTTPRequest对象

   var xmlhttp = getajaxHttp();

   //设置回调函数(响应的时候调用的函数)

   xmlhttp.onreadystatechange = function() {

    //这个函数中的代码在什么时候被XMLHTTPRequest对象调用?

    //当服务器响应时,XMLHTTPRequest对象会自动调用该回调方法

    if (xmlhttp.readyState == 4) {

     if (xmlhttp.status == 200) {

      functionName(xmlhttp.responseText);

     }

    }

   };

   //创建请求

   xmlhttp.open(methodtype, url, con);

   //发送请求

   xmlhttp.send();

  }

 

  window.onload=function(){

   ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse);

  }

  //动态获取省的信息

  function addrResponse(responseContents){

   var jsonObj = new Function("return" + responseContents)();

   for(var i = 0; i < jsonObj.addrList.length;i++){

    document.getElementById('select').innerHTML +=

     "<option value='"+jsonObj.addrList[i].id+"'>"

      +jsonObj.addrList[i].address+

     "</option>"

   }

  }

  //选中省后

  function pChange(){

   //先将市的之前的信息清除

   document.getElementById('selectCity').innerHTML="<option value='-1'>请选择市</option>";

   //再将区的信息清除

   document.getElementById('selectArea').innerHTML="<option value='-1'>请选择区</option>";

   //再将用户的输入清楚

   document.getElementById("addr").innerHTML="";

   var val = document.getElementById('select').value;

   if(val == -1){

    document.getElementById('selectCity')[0].selected = true;

    return;

   }

   //开始执行获取市

   ajaxrequest("addressSerlvet?method=city&provincial="+val,"POST",true,cityResponse);

  }

  //获取市的动态数据

  function cityResponse(responseContents){

   var jsonObj = new Function("return" + responseContents)();

   for(var i = 0; i < jsonObj.cityList.length;i++){

    document.getElementById('selectCity').innerHTML +=

     "<option value='"+jsonObj.cityList[i].id+"'>"

      +jsonObj.cityList[i].address+

     "</option>"

   }

  }

  //选中市以后

  function cChange(){

   var val = document.getElementById('selectCity').value;

   //开始执行获取区

   ajaxrequest("addressSerlvet?method=area&cityId="+val,"POST",true,areaResponse);

  }

  //获取区的动态数据

  function areaResponse(responseContents){

   var jsonObj = new Function("return" + responseContents)();

   for(var i = 0; i < jsonObj.areaList.length;i++){

    document.getElementById('selectArea').innerHTML +=

     "<option value='"+jsonObj.areaList[i].id+"'>"

      +jsonObj.areaList[i].address+

     "</option>"

   }

  }

  //点击提交按钮

  function confirM(){

   //获取省的文本值

   var p = document.getElementById("select");

   var pTex = p.options[p.options.selectedIndex].text;

   if(p.value=-1){

    alert("请选择省");

    return;

   }

   //获取市的文本值

   var city = document.getElementById("selectCity");

   var cityTex = city.options[city.options.selectedIndex].text;

   if(city.value=-1){

    alert("请选择市");

    return;

   }

   //获取区的文本值

   var area = document.getElementById("selectArea");

   var areaTex = area.options[area.options.selectedIndex].text;

   if(area.value=-1){

    alert("请选择区");

    return;

   }

   //获取具体位置id文本值

   var addr = document.getElementById("addr").value;

   //打印

   document.getElementById("show").innerHTML = "您选择的地址为 " + pTex + " " + cityTex + " " + areaTex + " " + addr;

  }

 

 </script>

<body>

 <select id="select" onchange="pChange()">

  <option value="-1">请选择省</option>

 </select>

 <select id="selectCity" onchange="cChange()">

  <option value='-1'>请选择市</option>

 </select>

 <select id="selectArea" onchange="aChange()">

  <option value='-1'>请选择市</option>

 </select>

 <input type="text" id="addr" />

 <button onclick="confirM();">确定</button>

 <p id="show"></p>

</body>

</html>

登录后复制

AddressServlet.java


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

package cn.bestchance.servlet;

 

import java.io.IOException;

import java.util.ArrayList;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import cn.bestchance.dao.AddressDao;

import cn.bestchance.dao.impl.AddressDaoImpl;

import cn.bestchance.entity.Address;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

 

@WebServlet("/addressSerlvet")

public class AddressSerlvet extends HttpServlet {

 private static final long serialVersionUID = 1L;

 private AddressDao dao = new AddressDaoImpl();

 

 protected void doGet(HttpServletRequest request,

   HttpServletResponse response) throws ServletException, IOException {

  doPost(request, response);

 }

 

 /**

  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

  *  response)

  */

 protected void doPost(HttpServletRequest request,

   HttpServletResponse response) throws ServletException, IOException {

 

  response.setCharacterEncoding("utf-8");

  response.setContentType("text/html;charset=utf-8");

  String method=request.getParameter("method");

  if("provincial".equals(method)){

   getProvincial(request, response);

  }

  if("city".equals(method)){

   getCity(request, response);

  }

  if("area".equals(method)){

   getArea(request, response);

  }

 }

 /**

  * 根据市id获取该市下的区的全部信息

  * @param request

  * @param response

  * @throws ServletException

  * @throws IOException

  */

 protected void getArea(HttpServletRequest request,

   HttpServletResponse response) throws ServletException, IOException {

 

  String cityId = request.getParameter("cityId");

  // 从数据库中查询省的信息

  ArrayList<Address> areaList = dao.getAreaByCityId(Integer.parseInt(cityId));

  // 将集合转成json字符串

  JSONObject jsonObj = new JSONObject();

  JSONArray jsonArray = JSONArray.fromObject(areaList);

  jsonObj.put("areaList", jsonArray);

  String jsonDataStr = jsonObj.toString();

 

  response.getWriter().print(jsonDataStr);

 }

 /**

  * 获取省的信息 并相应

  * @param request

  * @param response

  * @throws ServletException

  * @throws IOException

  */

 protected void getProvincial(HttpServletRequest request,

   HttpServletResponse response) throws ServletException, IOException {

 

  // 从数据库中查询省的信息

  ArrayList<Address> addrList = dao.getProvince();

  // 将集合转成json字符串

  JSONObject jsonObj = new JSONObject();

  JSONArray jsonArray = JSONArray.fromObject(addrList);

  jsonObj.put("addrList", jsonArray);

  String jsonDataStr = jsonObj.toString();

  response.getWriter().print(jsonDataStr);

 }

 /**

  * 获取市的信息并相应

  * @param request

  * @param response

  * @throws ServletException

  * @throws IOException

  */

 protected void getCity(HttpServletRequest request,

   HttpServletResponse response) throws ServletException, IOException {

 

  String provinceId = request.getParameter("provincial");

  // 从数据库中查询省的信息

  ArrayList<Address> addrList = dao.getCityByProvinceId(Integer.parseInt(provinceId));

 

  // 将集合转成json字符串

  JSONObject jsonObj = new JSONObject();

  JSONArray jsonArray = JSONArray.fromObject(addrList);

  jsonObj.put("cityList", jsonArray);

  String jsonDataStr = jsonObj.toString();

 

  response.getWriter().print(jsonDataStr);

 }

 

}

登录后复制

AddressDao.java


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

package cn.bestchance.dao;

 

import java.util.ArrayList;

 

import cn.bestchance.entity.Address;

 

public interface AddressDao {

 /**

  * 获取省的id和名称

  * @return

  */

 ArrayList<Address> getProvince();

 /**

  * 根据省的id获取市的信息

  * @param provinceId

  * @return

  */

 ArrayList<Address> getCityByProvinceId(int provinceId);

 /**

  * 根据市的id获取区的信息

  * @param cityId

  * @return

  */

 ArrayList<Address> getAreaByCityId(int cityId);

}

登录后复制

AddressDaoImpl.java


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

package cn.bestchance.dao.impl;

 

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

 

import cn.bestchance.dao.AddressDao;

import cn.bestchance.entity.Address;

import cn.bestchance.util.DBUtil;

 

public class AddressDaoImpl implements AddressDao {

 private DBUtil db = new DBUtil();

 @Override

 public ArrayList<Address> getProvince() {

  ArrayList<Address> addrList = new ArrayList<Address>();

  db.openConnection();

  String sql = "select * from province";

  ResultSet rs = db.excuteQuery(sql);

  try {

   while(rs.next()){

    Address addr = new Address();

    addr.setId(rs.getInt(2));

    addr.setAddress(rs.getString(3));

    addrList.add(addr);

   }

  } catch (SQLException e) {

   // TODO Auto-generated catch block

   e.printStackTrace();

  }finally{

   if(rs != null){

    try {

     rs.close();

    } catch (SQLException e) {

     // TODO Auto-generated catch block

     e.printStackTrace();

    }

   }

   db.closeResoure();

  }

  return addrList;

 }

 @Override

 public ArrayList<Address> getCityByProvinceId(int provinceId) {

  ArrayList<Address> addrList = new ArrayList<Address>();

  db.openConnection();

  String sql = "select * from city where fatherID = " + provinceId; //431200

  ResultSet rs = db.excuteQuery(sql);

  try {

   while(rs.next()){

    Address addr = new Address();

    addr.setId(rs.getInt(2));

    addr.setAddress(rs.getString(3));

    addrList.add(addr);

   }

  } catch (SQLException e) {

   // TODO Auto-generated catch block

   e.printStackTrace();

  }finally{

   if(rs != null){

    try {

     rs.close();

    } catch (SQLException e) {

     // TODO Auto-generated catch block

     e.printStackTrace();

    }

   }

   db.closeResoure();

  }

  return addrList;

 }

 @Override

 public ArrayList<Address> getAreaByCityId(int cityId) {

  ArrayList<Address> addrList = new ArrayList<Address>();

  db.openConnection();

  String sql = "select * from area where fatherID = " + cityId; //431200

  ResultSet rs = db.excuteQuery(sql);

  try {

   while(rs.next()){

    Address addr = new Address();

    addr.setId(rs.getInt(2));

    addr.setAddress(rs.getString(3));

    addrList.add(addr);

   }

  } catch (SQLException e) {

   // TODO Auto-generated catch block

   e.printStackTrace();

  }finally{

   if(rs != null){

    try {

     rs.close();

    } catch (SQLException e) {

     // TODO Auto-generated catch block

     e.printStackTrace();

    }

   }

   db.closeResoure();

  }

  return addrList;

 }

 

}

登录后复制

实体类Address.java


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

package cn.bestchance.entity;

 

public class Address {

 @Override

 public String toString() {

  return "Address [id=" + id + ", address=" + address + "]";

 }

 private int id;

 private String address;

 public int getId() {

  return id;

 }

 public void setId(int id) {

  this.id = id;

 }

 public String getAddress() {

  return address;

 }

 public void setAddress(String address) {

  this.address = address;

 }

 public Address() {

  super();

  // TODO Auto-generated constructor stub

 }

 public Address(int id, String address) {

  super();

  this.id = id;

  this.address = address;

 }

 

}

登录后复制

相关推荐:

JavaScript实现三级级联特效

详解iframe制作三级级联菜单

全国省市区县三级级联数据

以上就是Ajax实现省市区三级级联详解的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号