標籤：color 直接 wamp parse json imu fun UI 簡單
上一章簡單說了一下wamp的按照和配置，相信大部分同學已經按照好了，今天正式講一下HTML與PHP之間的傳值。
1、PHP向HTML傳值
2、HTML向PHP傳值： 這裡可以分為兩部分講解:
2.1、常見的表單form的提交;
2.2、通過ajax把資料傳遞給後台。
1、PHP向HTML傳值
1.1、 首先，開啟wamp，在上一章配置好的伺服器根目錄 E:/work/PHPtest/中建立test.php檔案, 我們的檔案就放在PHPtest中。
1.2、我們先測試一下運行php的Apache環境是否配置成功，看看能否運行test.php檔案。
<?php echo "hello world";?>
儲存代碼，開啟瀏覽器，輸入上章配置好的設定管理員地址： myserver.com/test.php
如果瀏覽器顯示上面的英文，說明運行php的Apache環境是可行的。
註： 如果是漢字輸出在最頂部加上一段代碼：
header("content-type: text/html; charset=utf-8");
1.3、在PHPtest中建立一個test.html,這個HTML是用來接收test.php中的資料。
<!DOCTYPE html><html lang=‘en‘> <head> <meta charset=‘UTF-8‘> <meta name=‘viewport‘ content=‘width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no‘> <meta http-equiv=‘X-UA-Compatible‘ content=‘ie=edge‘> <meta name=‘keywords‘ content=‘‘> <meta name=‘description‘ content=‘‘> <title>Document</title> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> <script> $.get("./test.php", function(data){ console.log(data); }) </script> </body></html>
這裡我用了jquery外掛程式，簡潔便於直觀，如果興趣的同學，可以嘗試用原生ajax編寫。
我們可以在 http://myserver.com/PHPtest/test.html 的控制台看見有 "hello world" 列印出來，這說明資料已經傳輸到test.html中。
註： 擷取資料一般使用 get 請求， 提交資料一般使用 post 請求。
1.4、 當然實際工作中後台不可能傳輸這麼簡單的一句話，往往是嵌套的數組或者對象之類的JSON資料，那麼他們該怎麼傳遞呢？
1.4.1、其實這個傳輸方式都一樣，作者都以最簡單的 echo 方式傳輸， 只要將需要的資料進行壓縮編碼成字串，前端來請求接收就可以。
1.4.2、對於前端怎麼處理這個json資料，很簡單， 接下來分別講述一下。
1.4.3、 首先，編寫test.php檔案，我們重新寫一遍。
<?php //php中數組的建立 $arr = array("name" => "jeck", "age" => "20", "gender" => "male"); //echo後面可以用括弧，可以不用 //傳遞的資料必須是字串，需要使用json_encode進行編碼 echo json_encode($arr);?>
我們再重新整理一下，之前的頁面可以看到，控制台中顯示出了JOSN對象形式的字串，如果在test.html中使用它，必須使用 JSON.parse()將字串變成對象。
再來，如果不是單一的組數，嵌套數組或者對象：
<?php //php中數組的建立 $arr = array("name" => "jeck", "age" => "20", "gender" => "male"); //利用重複定義數組，組合新的數組。 // $json = array("id" => 0, "item" => $arr); //數組的形式可以自由搭配 // $json = array("id" => 0, "item" => array("jeck", "20", "male")); //直接在新的數組中，直接定義 $json = array("id" => 0, "item" => array("name" => "jeck", "age" => "20", "gender" => "male")); //echo後面可以用括弧，可以不用 //傳遞的資料必須是字串，需要使用json_encode進行編碼 echo json_encode($json);?>
重新整理頁面，在控制台中可以看到：
這些是PHP中一些簡單的組合，興趣的同學可以嘗試複雜的組合，在PHP中向數組中添加元素使用的函數是 ： array_push() 這個方法挺好用的。
1.4.4、接下來講一下在test.html 中如何使用這些資料：
<!DOCTYPE html><html lang=‘en‘> <head> <meta charset=‘UTF-8‘> <meta name=‘viewport‘ content=‘width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no‘> <meta http-equiv=‘X-UA-Compatible‘ content=‘ie=edge‘> <meta name=‘keywords‘ content=‘‘> <meta name=‘description‘ content=‘‘> <title>Document</title> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> <p id="text"></p> <script> $.get("./test.php", function(data){ //首先，需要解碼 JSON.parse(data) var res = JSON.parse(data); // 可以列印出來看一看 console.log(res); //簡單拼接，不用模板引擎，如果是一個重複類資料，需要迴圈，建議使用模板引擎 var txtStr = "My name is" + res.item.name + ", I am " + res.item.gender + ", " + res.item.age + " years old."; //建立一個標籤p,用來放置txtStr $("#text").html(txtStr); }) </script> </body></html>
重新整理頁面，可以看出頁面會出現這行：
PHP向HTML傳值基本就這樣，下一章講解HTML向PHP傳值
關於wamp的HTML， PHP， mysql 三者的操作與聯絡 - HTML與PHP之間傳值（上）（二）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
