考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:编程开发 > AJAX > 文章内容
  

AJAX教程:Ajax实现省市区三级级联(数据来自mysql数据库)

 [ 2017年6月30日 ] 【

  实现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
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
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 +=
     "
      +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 +=
     "
      +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 +=
     "
      +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>
 <div id="show">div>
body>
html>
首页 1 2 3 4 尾页
本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved