前端點滴（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