关于Ajax
1.干什么的？
ajax负责抓取用户名信息，传递给服务器进行校验；
2.属性：
onreadystatechange：事件，该事件可以感知ajax状态(readyState)的变化。ajax请求过程中要随时感知其状态
readyState：表示ajax状态值
ajax有5种状态readyState：
0------> 创建ajax对象完毕
1------> 有调用open()方法
2------> 有调用send()方法
3------> 服务器端数据只返回了一部分
4------> 服务器端数据全部返回，ajax请求完成
responseText：以字符串形式接收服务器端返回的信息
3.方法：
open()：创建一个新的http请求
send():发送请求到服务器
例如：
get：$xhr.open("get","123.php?a=1&b=2")；$xhr.send(null); //如果方式为get，则send为null
post：$xhr.open("post","123.php)；post方法的对应的send：
//(要在open()方法执行之后设置)
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
var info = "name=abc&age=20";
xhr.send(info);
4.同步异步：
async：true/false,
true(默认):异步。同时可进行多个操作。
false：同步。同一时间只能进行一个操作。
5.页面跳转
ajax不能从php页面直接进行跳转，只是返回一个数据。要想跳转页面要从js跳转。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
</head> <body>
省：<select name="" id="sheng" onChange="selshi(this)">
<option value="">请选择</option>
</select>
市：<select name="" id="shi" onChange="selqu(this)">
<option value="">请选择</option>
</select>
区：<select name="" id="qu">
<option value="">请选择</option>
</select>
</body>
</html>
<script>
var attr = [];
//页面加载完成显示省的内容
window.onload = function(){
//发起请求
sendInfo("sheng");
}
function sendInfo(type,code=0){
//创建对象
var xhr = new XMLHttpRequest();
//监听ajax状态
//responseText(返回值)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//处理数据
chuliData(xhr.responseText,type); }
}
//创建请求
xhr.open("get","conn_db.php?type="+type+"&code="+code);
//发送请求
xhr.send(null);
}
function chuliData(data,type){
//将字符串转为二维字符数组arr：1,山东；3,河北；
var arr = data.split(";");
var str = '';
for(var i = 0; i < arr.length; i++){
//拆分二维数组为：1,山东
attr[i] = arr[i].split(",");
//option的value = 1，内容 = 山东
str += '<option value="'+attr[i][0]+'">'+attr[i][1]+'</option>';
}
console.log(str);
document.getElementById(type).innerHTML = str;
}
function selshi(obj){
sendInfo('shi',obj.value);
}
function selqu(obj){
sendInfo('qu',obj.value);
}
</script>
三级联动示例：html+js部分
<?php
//链接数据库
$db = new mysqli('localhost','root','123456','sjld');
//判断链接是否成功
!mysqli_connect_error() or die("连接失败");
//设置字符编码
$db->query("set names utf8"); $sql = "";
$str = "";
//获取code（上级id）
$get_code = $_GET['code'];
//根据$get_code查询出相关数据
$sql = "select id,area_name from dt_area where pid = $get_code";
$res = $db->query($sql);
$arr = $res->fetch_all();
//处理二维数组$arr,先转为字符串
foreach($arr as $v){
foreach($v as $vv){
$str .= $vv.",";
}
//去掉最后一个逗号
$str = substr($str,0,-1);
//一组结束，用；分隔
$str .= ";";
}
//去掉最后一个分号
$str = substr($str,0,-1);
echo $str;
三级联动示例：php部分