前端点滴（JS核心）（二）---- Ajax基础（二）、使用 Ajax 实现多表联动

最新推荐文章于 2021-08-06 02:18:06 发布

全干丶

最新推荐文章于 2021-08-06 02:18:06 发布

阅读量354

点赞数

分类专栏：前端总结文章标签： php javascript 前端

本文链接：https://blog.csdn.net/errrl/article/details/104073772

版权

前端总结专栏收录该内容

27 篇文章 1 订阅

订阅专栏

前端点滴（JS核心）（二）----倾尽所有

Ajax 基础（二）
- 1. Json
二、使用Ajax实现多表联动

Ajax 基础（二）

1. Json

（1）什么是Josn

json本质就是字符串，只不过这个字符串的格式有要求，格式要符合js中的数组或对象的格式。
比如：

{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}

（2）Json 的用处

json在web开发中，它起到的作用和xml和的作用一样。具体来说，json可以当做配置文件，json文件可以存储数据，可用作测试接口数据，json可以当做两种编程语言交换数据的媒介。
在这里插入图片描述

（3）Json和PHP进行转换

为什么要进行数据的转换？
原因：就是在 Ajax 中PHP的数据和JS的数组不一样，所以要转换成JSON格式，然后再返回。

将 PHP 数据转换成 Json 格式数据（json_encode(php数据)）

<?php
$arr = ['apple','banana','pear'];
class A{
    public $name = 'chen';
    public $age = 20;
}
$tmp = [];
 $tmp['example'] = [
    0=>(object)['name'=>'yaodao','age'=>20],
    1=>(object)['name'=>'jack','age'=>25]
];


$obj = new A;
echo (json_encode($tmp));
echo '<br>';
echo(json_encode($arr));
echo '<br>';
echo(json_encode($obj));
?>

结果：
在这里插入图片描述
2. 将 Json 格式的数据转换成 PHP 数据（json_decode(json格式数据)）

<?php
$arr = ['apple','banana','pear'];
class A{
    public $name = 'chen';
    public $age = 20;
}
$tmp = [];
 $tmp['example'] = [
    0=>(object)['name'=>'yaodao','age'=>20],
    1=>(object)['name'=>'jack','age'=>25]
];


$obj = new A;
$str1 = json_encode($tmp);
$str2 = json_encode($arr);
$str3 = json_encode($obj);

print_r (json_decode($str1));
echo '<br>';
print_r(json_decode($str2));
echo '<br>';
print_r(json_decode($str3));
?>

结果：
在这里插入图片描述

（4）Json和JavaScript进行转换

将 JavaScript 数据转换成 Json 格式数据（JSON.stringify(JavaScript数据)）

    <script>
        var arr = ['apple','banana','pear'];
        var obj = {name:'jack',age:20};
        var tmp = {example:[{name:'chen',age:20},{name:'yaodao',age:25},{name:'jack',age:30}]}    
        
        console.log(JSON.stringify(arr));
        console.log(JSON.stringify(obj));
        console.log(JSON.stringify(tmp));
    </script>

结果：
在这里插入图片描述

将 Json 数据格式转换成 JavaScript 数据（JSON.parse(json格式数)）（eval() 方法函数）

    <script>
        var arr = ['apple','banana','pear'];
        var obj = {name:'jack',age:20};
        var tmp = {example:[{name:'chen',age:20},{name:'yaodao',age:25},{name:'jack',age:30}]}    
        
        var json1 = JSON.stringify(arr);
        var json2 = JSON.stringify(obj);
        var json3 = JSON.stringify(tmp);

        console.log(JSON.parse(json1));
        console.log(JSON.parse(json2));
        console.log(JSON.parse(json3));
    </script>

结果：
在这里插入图片描述

（5）总结

利用 json 媒介进行数据交互。
在这里插入图片描述
没有通过 Json 进行数据交互的情况：

JavaScript代码：

<script>
window.onload = function(){
            var xhr = new XMLHttpRequest();
            xhr.open('get','test.php',true);
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var res = xhr.responseText;
                    console.log(res);
                }
            }
        }
</script>

PHP代码：

<?php
$tmp = [];
 $tmp['example'] = [
    0=>(object)['name'=>'yaodao','age'=>20],
    1=>(object)['name'=>'jack','age'=>25]
];

print_r($tmp);  // php中只能使用print_r输出数组
?>

输出结果：
在这里插入图片描述
通过 Json 进行数据交互的情况：

JavaScript代码：

<script>
window.onload = function(){
            var xhr = new XMLHttpRequest();
            xhr.open('get','test.php',true);
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var res = xhr.responseText;
                    // console.log(res);
                    var realRes = JSON.parse(res);
                    console.log(realRes);
                }
            }
        }
</script>

PHP代码：

<?php
$tmp = [];
 $tmp['example'] = [
    0=>(object)['name'=>'yaodao','age'=>20],
    1=>(object)['name'=>'jack','age'=>25]
];

// print_r($tmp);
echo json_encode($tmp);
?>

输出结果：
在这里插入图片描述

二、使用Ajax实现多表联动

1. 准备

一、下载

Navicat Premium 12 用于操作数据库。
链接: https://pan.baidu.com/s/19s13smuDcTeaDTAU0UqG7Q
提取码: 94md
复制这段内容后打开百度网盘手机App，操作更方便哦
教程用于操作数据库。

二、下载数据库文件 test.sql
链接: https://pan.baidu.com/s/19s13smuDcTeaDTAU0UqG7Q
提取码: 94md
复制这段内容后打开百度网盘手机App，操作更方便哦

三、打开 wampserver、apache，打开 Navicat Premium 12 导入 test.sql数据库文件

在本地数据库中新建一个数据库 test 。（为了方便操作）
在新建的数据库中运行下载好的 sql 文件
操作完毕，进行数据表观察。
C 层数据库基本操作

连接数据库

获取数据库数据：select * from 数据表 where 条件;
例子：

/* 查询所有的省：*/ select * from sheng;
/* 查询河北省中的市： */ select * from shi where ProvinceCode = 130000;
/* 查询石家庄市的县： */ select * from xian where CityCode = 130100;

添加数据库数据：insert into 数据表(数据属性) values(数据属性值)
删除数据库数据：delete from 数据表 where 条件
修改数据库数据：update 数据表 set 修改的数据 where 条件

2. 创建文件

（1）加载省份

HTML

    <select id="sheng">
        <option value="0">--请选择省份--</option>
    </select>
    <select id="shi">
        <option value="0">--请选择市--</option>
    </select>
    <select id="xian">
        <option value="0">--请选择县、区--</option>
    </select>

PHP(05city.php)

<?php
/* 连接数据库 */
$pdo = new PDO('mysql:host=localhost; dbname=test; charset=utf8','root');

$type = $_GET['type'];
if($type == 'sheng'){
/* 获取省份 */
$sql = 'select * from sheng';
}

/* 准备查询语句 */
/* 注意php中调用方法不用（.）点语法，而是使用（->）箭头语法，php中的点语法用于字符串连接，相当于+ */
$stmt = $pdo->prepare($sql);

/* 执行查询语句，并返回结果集 */
$stmt->execute();

/* 获取结果集中所有的数据，返回一个 php 格式数组 */
$res = $stmt->fetchAll(PDO::FETCH_ASSOC);

/* 使用 json 媒介进行 php 格式转换 */
echo json_encode($res);
?>

JavaScript

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if(xhr.readyState==4 && xhr.status==200){
            //接收服务器返回的数据
            var result = xhr.responseText;
            var res = JSON.parse(result);
            //console.log(res); //JS数组
            var sheng = document.getElementById('sheng');
            for(var i in res){
                var option = document.createElement('option');
                option.setAttribute('value', res[i].Pcode);
                option.innerText = res[i].Pname;
                sheng.appendChild(option);
            }
        }
    };
    xhr.open('get', '05city.php?type=sheng', true);
    xhr.send();

（2）获取对应的市

JavaScript

/* 切换sheng时，获取其对应的Pcode值，后通过对应的Pcode值查询对应的市 */
document.getElementById('sheng').onchange = function () {
        //省切换的时候，要获取Pcode值，即option的value值
        var pcode = this.value; //类似于 130000
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4 && xhr.status==200){
                //接收服务器返回的数据
                var result = xhr.responseText;
                var res = JSON.parse(result);
                //console.log(res); //JS数组

                var shi = document.getElementById('shi');
                //把市的option放到select中之前，先重置select里面的内容
                shi.innerHTML = '<option value="0">--请选择市--</option>';
                document.getElementById('xian').innerHTML = '<option value="0">--请选择县--</option>';
                for(var i in res){
                    var option = document.createElement('option');
                    option.setAttribute('value', res[i].Ccode);
                    option.innerText = res[i].Cname;
                    shi.appendChild(option);
                }
            }
        };
        xhr.open('get', '05city.php?type=shi&Pcode='+pcode, true);
        xhr.send();

PHP(05city.php)

<?php
/* 连接数据库 */
$pdo = new PDO('mysql:host=localhost; dbname=test; charset=utf8','root');

$type = $_GET['type'];
if($type == 'sheng'){
	/* 获取省份 */
	$sql = 'select * from sheng';
}elseif($type == 'shi'){
	/* 获取对应的市 */
	$Pcode = $_GET['Pcode'];
	$sql = 'select * from shi where ProvinceCode = '.$Pcode;
}

/* 准备查询语句 */
/* 注意php中调用方法不用（.）点语法，而是使用（->）箭头语法，php中的点语法用于字符串连接，相当于+ */
$stmt = $pdo->prepare($sql);

/* 执行查询语句，并返回结果集 */
$stmt->execute();

/* 获取结果集中所有的数据，返回一个 php 格式数组 */
$res = $stmt->fetchAll(PDO::FETCH_ASSOC);

/* 使用 json 媒介进行 php 格式转换 */
echo json_encode($res);

（3）获取对应的区

JavaScript

/* 切换shi时，获取其对应的Ccode值，后通过对应的Ccode值查询对应的市 */
 document.getElementById('shi').onchange = function () {
        //市切换的时候，要获取Ccode值，即option的value值
        var ccode = this.value; //类似于 130000
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4 && xhr.status==200){
                //接收服务器返回的数据
                var result = xhr.responseText;
                var res = JSON.parse(result);
                //console.log(res); //JS数组

                var xian = document.getElementById('xian');
                //把县的option放到select中之前，先重置select里面的内容
                xian.innerHTML = '<option value="0">--请选择县--</option>';
                for(var i in res){
                    var option = document.createElement('option');
                    option.setAttribute('value', res[i].Acode);
                    option.innerText = res[i].Aname;
                    xian.appendChild(option);
                }
            }
        };
        xhr.open('get', '05city.php?type=xian&Ccode='+ccode, true);
        xhr.send();

PHP(05city.php)

<?php
/* 连接数据库 */
$pdo = new PDO('mysql:host=localhost; dbname=test; charset=utf8','root');

$type = $_GET['type'];
if($type == 'sheng'){
	/* 获取省份 */
	$sql = 'select * from sheng';
}elseif($type == 'shi'){
	/* 获取对应的市 */
	$Pcode = $_GET['Pcode'];
	$sql = 'select * from shi where ProvinceCode = '.$Pcode;
}elseif($type == 'xian'){
	/* 获取对应的县、区 */
	$Ccode = $_GET['Ccode'];
	$sql = 'select * from xian where CityCode = '.$Ccode;
}

/* 准备查询语句 */
/* 注意php中调用方法不用（.）点语法，而是使用（->）箭头语法，php中的点语法用于字符串连接，相当于+ */
$stmt = $pdo->prepare($sql);

/* 执行查询语句，并返回结果集 */
$stmt->execute();

/* 获取结果集中所有的数据，返回一个 php 格式数组 */
$res = $stmt->fetchAll(PDO::FETCH_ASSOC);

/* 使用 json 媒介进行 php 格式转换 */
echo json_encode($res);

（4）完整代码

HTML

    <select id="sheng">
        <option value="0">--请选择省份--</option>
    </select>
    <select id="shi">
        <option value="0">--请选择市--</option>
    </select>
    <select id="xian">
        <option value="0">--请选择县、区--</option>
    </select>

JavaScript

<script>
    /************************ 页面加载完毕，获取省 *********************************/
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if(xhr.readyState==4 && xhr.status==200){
            //接收服务器返回的数据
            var result = xhr.responseText;
            var res = JSON.parse(result);
            //console.log(res); //JS数组
            var sheng = document.getElementById('sheng');
            for(var i in res){
                var option = document.createElement('option');
                option.setAttribute('value', res[i].Pcode);
                option.innerText = res[i].Pname;
                sheng.appendChild(option);
            }
        }
    };
    xhr.open('get', '05city.php?type=sheng', true);
    xhr.send();

    /************************ 省切换的时候，获取市 *********************************/
    document.getElementById('sheng').onchange = function () {
        //省切换的时候，要获取Pcode值，即option的value值
        var pcode = this.value; //类似于 130000
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4 && xhr.status==200){
                //接收服务器返回的数据
                var result = xhr.responseText;
                var res = JSON.parse(result);
                //console.log(res); //JS数组

                var shi = document.getElementById('shi');
                //把市的option放到select中之前，先重置select里面的内容
                shi.innerHTML = '<option value="0">--请选择市--</option>';
                document.getElementById('xian').innerHTML = '<option value="0">--请选择县--</option>';
                for(var i in res){
                    var option = document.createElement('option');
                    option.setAttribute('value', res[i].Ccode);
                    option.innerText = res[i].Cname;
                    shi.appendChild(option);
                }
            }
        };
        xhr.open('get', '05city.php?type=shi&Pcode='+pcode, true);
        xhr.send();
    };

    /************************ 切换市，获取县 *********************************/
    document.getElementById('shi').onchange = function () {
        //市切换的时候，要获取Ccode值，即option的value值
        var ccode = this.value; //类似于 130000
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4 && xhr.status==200){
                //接收服务器返回的数据
                var result = xhr.responseText;
                var res = JSON.parse(result);
                //console.log(res); //JS数组

                var xian = document.getElementById('xian');
                //把县的option放到select中之前，先重置select里面的内容
                xian.innerHTML = '<option value="0">--请选择县--</option>';
                for(var i in res){
                    var option = document.createElement('option');
                    option.setAttribute('value', res[i].Acode);
                    option.innerText = res[i].Aname;
                    xian.appendChild(option);
                }
            }
        };
        xhr.open('get', '05city.php?type=xian&Ccode='+ccode, true);
        xhr.send();
    };
</script>

PHP(05city.php)

<?php
//连接数据库
$pdo = new PDO('mysql:host=localhost; dbname=test; charset=utf8','root');

//获取type
$type = $_GET['type'];
if($type == 'sheng'){
    //写SQL
    $sql = 'select * from sheng';
} elseif ($type == 'shi'){
    $Pcode = $_GET['Pcode'];
    //写SQL
    $sql = 'select * from shi where ProvinceCode = '.$Pcode;
} elseif ($type == 'xian'){
    $Ccode = $_GET['Ccode'];
    $sql = 'select * from xian where CityCode = '.$Ccode;
}

//预处理
$stmt = $pdo->prepare($sql); //返回值是PDOStatement对象，结果集对象
//如果SQL中有占位符（? 或 :xxx），则需要使用bindValue绑定值
//执行
$stmt->execute();
//获取结果
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
//echo '<pre>';
//print_r($data);
echo json_encode($data);