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

原創 without BUG 2020-07-07 20:11

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

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格式，然后再返回。

  1. 将 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进行转换

  1. 将 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>

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

  1. 将 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. 准备

一、下载

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

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

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

  1. 在本地数据库中新建一个数据库 test 。（为了方便操作）
    在这里插入图片描述
  2. 在新建的数据库中运行下载好的 sql 文件
    在这里插入图片描述
  3. 操作完毕，进行数据表观察。
    在这里插入图片描述
  4. 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);
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端点滴（CSS）（二）

前端點滴（CSS）（二）---傾盡所有CSS Hack條件hack屬性級hack選擇符hack（選擇器前綴）CSS單位一、px、em和rem的區別二、vw、vh 與 % 百分比的區別三、vmin、vmax 用處CSS尺寸CSS佈局

without BUG 2020-07-07 20:11:24

前端点滴（JS基础）（二）---- Array 对象

前端點滴（JS基礎）（二）----傾盡所有JavaScript 內置對象（一）內置對象公有屬性1. constructor 返回對象的構造函數。2. prototype、__ proto __ 允許你向原型對象添加屬性或方法。3.

without BUG 2020-07-07 20:11:20

前端点滴（JS核心）（三）---- 使用 Ajax 实现多表联动（优化）、XML、FromData对象、跨域请求

前端點滴（JS核心）（三）----傾盡所有一、優化三表聯動1. 將數據庫修改成文件2. 簡化 PHP 代碼 （控制層）3. 修改 JavaScript 代碼（1）加載省份（2）加載對應的市（3）加載對應的區、縣4. 簡化 Java

without BUG 2020-07-07 20:11:19

前端点滴（网络协议/HTML/前端优化/浏览器）

前端點滴（網絡協議/HTML/前端優化/瀏覽器）---傾盡所有網絡協議/HTML/前端優化/瀏覽器IOS七層模型網絡協議一、 HTTP與HTTPS協議（1）http與https概述（2）http與https區別http協議/TCP

without BUG 2020-07-07 20:11:19

前端点滴（前端优化）

前端點滴（前端優化）---傾盡所有前端優化方案降低請求量資源合併與壓縮資源壓縮資源合併圖片相關優化lazyLoad && preLoadlazyLoadpreLoad防抖與節流加快請求速度DNS Prefetching（DNS與解

without BUG 2020-07-07 20:11:19

前端点滴（JS基础）（一）----倾尽所有

前端點滴（JS基礎）（一）----傾盡所有js基礎一、js的組成二、js放置位置三、js輸出方式四、js語句與表達式五、js變量1. 什麼是變量2. 如何使用變量（1）變量的聲明var、let（es6）、constvar、let

without BUG 2020-07-07 20:11:16

前端点滴（ES6+）（二）

ES6+新特性說明 （補充）一、ES6新特性（2015） 1. 新的基本類型 symbol symbol 是一種基本數據類型 （primitive data type)。Symbol()函數會返回symbol類型的值，該類型具有靜

without BUG 2020-07-07 20:11:16

常用开发技术文档搜集-前端

目錄 1  前端框架 1.1 notejs  JavaScript 運行環境 1.2  vue   1.3 AngularJS 1.4 React 1.5 EmberJS 1.6  Aurelia.js 2 前端組件庫 2.1 easyu

qq_41609208 2020-07-07 17:39:20

三天学完css3.0系列（三）

該系列總結爲筆者學習之初的學習記錄，難免有些許欠缺。需要文件打包的可以聯繫我，免費發放。 css3.0 js簡介（下期編輯js系列）

Java新生代 2020-07-05 21:02:19

三天学完css3.0系列（二）

該系列總結爲筆者學習之初的學習記錄，難免有些許欠缺。需要文件打包的可以聯繫我，免費發放。 需要系列源文件可聯繫作者，免費發放。

Java新生代 2020-07-05 21:02:19

三天学完css3.0系列（一）

該系列總結爲筆者學習之初的學習記錄，難免有些許欠缺。需要文件打包的可以聯繫我，免費發放。 需要系列源文件可聯繫作者，免費發放。

Java新生代 2020-07-05 21:02:19

浏览器内部 进程线程 笔记

本文引用於：http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html 1.瀏覽器都包含哪些進程？ Browser進程：瀏覽器的主進程（負責協調、主控），只有一個。

你很棒棒哦 2020-07-03 19:56:19

css布局-从display，position，float属性谈起

頁面佈局，或者是在頁面上做些小效果的時候經常會用到 display,position和float 屬性，如果對它們不是很瞭解的話，很容易出現一些莫名其妙的效果，痛定思痛讀了《CSS Mastery》後總結一下。 讓我們從基礎的CSS知

comeonstone 2020-07-03 12:44:38

js底层运行机制 代码演示 VO/GO

js底層運行機制 代碼演示 VO/GO VO 變量對象 GO 全局對象 ECStack 執行環境棧 EC 全局執行上下文 var a = 12; var b = a; b = 13; console

俺呀尼哇 2020-07-03 00:10:22

公司裁员前的征兆，裁员前后 你应该怎么做？

公司裁員前後 你應該怎麼做？ 前言： 不管公司是否裁員，你也要加一些仲裁羣或者一些律師好友至少要要五六位。平時看看他們的朋友圈是否經常發一些官司案件，當真的急需律師的時候，讓他們把律師證給你看下，直接付費諮詢就行了，也不用再去找了

俺呀尼哇 2020-07-02 23:13:01