省市区三级联动用ajax实现
ajax:
1.属性：
responseText 以字符串的形式接收服务端返回的信息
readyState 表示ajax状态值
onreadystatechange 该事件可以感知（readyState ）的变化ajax请求过程中要随时感知其状态
ajax有5种状态readyState：
0 ---------------------> 创建ajax对象完毕
1 ---------------------> 有调用open（）方法
2 ---------------------> 有调用send（）方法
3 ---------------------> 服务器端数据只返回了一部分
4 ---------------------> 服务端数据全部返回，ajax请求完成
2.方法：
opend（）创建一个新的http请求
send（）发送请求到服务器
例：
1.get ： xhr.open（"get",'index.php?a=0&b=1'）;
xhr.send（null）; //get方式 send是null
2.post： xhr.open（"post",'index.php'）;
//post需要加上这两句
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
var info = "name=abc&age=20";
xhr.send(info);
php部分：
1 <?php 2 //连接数据库 3 $db = new MySQLi('localhost','root','123','php0307'); 4 !mysqli_connect_error() or die('连接错误'); 5 $db->query('set names utf8'); 6 //接收code 7 $code = $_GET['code']; 8 //mysql查询语句 让pid等于code 9 $sql='select id,name from dt_area where pid ='.$code; 10 $res = $db->query($sql); 11 $arr = $res->fetch_all(); 12 //把二维数组变成一个字符串 13 $str = ""; 14 //[ 15 // [1,2,3], 16 // [4,5,6] 17 //] 18 foreach($arr as $k=>$v){ 19 foreach($v as $vv){//[1,2,3] 20 $str .= $vv.",";//1,2,3 21 } 22 $str = substr($str,0,-1);//1,2,3 23 $str .=';';//1,2,3; 24 } 25 $str = substr($str,0,-1); 26 echo $str;
html js部分：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <body> 8 省：<select id="sheng" onChange="selishi(this)"> 9 <option>请选择</option> 10 </select><br> 11 市：<select id="shi" onChange="seliqu(this)"> 12 <option>请选择</option> 13 </select><br> 14 区：<select id="qu"> 15 <option>请选择</option> 16 </select><br> 17 </body> 18 </html> 19 <script> 20 //定义一个空的数组 21 var attr = []; 22 //页面加载完成 23 window.onload = function(){ 24 //发起请求传了个id为sheng的参数 25 sendInfo('sheng'); 26 } 27 function sendInfo(type,code=0){ 28 //创建对象 29 var xhr = new XMLHttpRequest(); 30 //监听ajax状态 31 xhr.onreadystatechange = function(){ 32 //判断当他满足条件状态等于4的时候 数据是ajax数据全部返回 33 if(xhr.readyState==4){ 34 //处理数据 xhr.responseText他是一个返回值 返回页面输出的内容 type 就是省 35 chuiliData(xhr.responseText,type); 36 } 37 } 38 //get的传值方式 创建请求 39 xhr.open("get",'./index.php?code='+code); 40 //发送请求 41 xhr.send(null); 42 } 43 //执行处理数据的函数 data是xhr.readyState type是id为sheng的select 44 function chuiliData(data,type){ 45 //因为responseText返回的是字符串 将字符串转成数组的形式110000,北京;120000,天津 46 var arr1 = data.split(';'); 47 //定义一个变量 为一个option标签 内容是请选择 48 var str = '<option value="">请选择</option>'; 49 //循环 遍历arr1数组 50 for(var i=0;i<arr1.length;i++){ 51 //将二维数组后面的逗号去掉[[110000,北京],[120000,天津]] 52 attr[i]=arr1[i].split(','); 53 //option的value为110000 内容为北京.. 54 str += "<option value='"+attr[i][0]+"'>"+attr[i][1]+"</option>"; 55 } 56 //让id为sheng的slect的内容等于str 57 document.getElementById(type).innerHTML = str; 58 } 59 //选择省时调用的方法 60 function selishi(obj){ 61 //定义一个变量 为一个option标签 内容是请选择 62 var str = '<option value="">请选择</option>'; 63 //让id为qu的select的内容等与str 64 document.getElementById('qu').innerHTML = str; 65 // 66 sendInfo('shi',obj.value); 67 } 68 //选择市的时候调用的方法 69 function seliqu(obj){ 70 sendInfo('qu',obj.value); 71 } 72 </script>
