標籤: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之間傳值(上)(二)