關於wamp的HTML， PHP， mysql 三者的操做與聯繫 - HTML與PHP之間傳值（上）（二）

時間 2019-11-12

標籤關於 wamp html php mysql 聯繫之間欄目 HTML 简体版

原文原文鏈接

　　上一章簡單說了一下wamp的按照和配置，相信大部分同窗已經按照好了，今天正式講一下HTML與PHP之間的傳值。php

　　一、PHP向HTML傳值html

　　二、HTML向PHP傳值：這裏能夠分爲兩部分講解: 前端

　　　　2.一、常見的表單form的提交; jquery

　　　　2.二、經過ajax把數據傳遞給後臺。ajax

　　一、PHP向HTML傳值json

　　1.一、首先，開啓wamp，在上一章配置好的服務器根目錄 E:/work/PHPtest/中新建test.php文件, 咱們的文件就放在PHPtest中。數組

　　1.二、咱們先測試一下運行php的Apache環境是否配置成功，看看可否運行test.php文件。瀏覽器

<?php
    echo "hello world";
?>

　　保存代碼，打開瀏覽器，輸入上章配置好的配置服務器地址： myserver.com/test.php服務器

　　若是瀏覽器顯示上面的英文，說明運行php的Apache環境是可行的。jquery插件

　　注：若是是漢字輸出在最頂部加上一段代碼：

header("content-type: text/html; charset=utf-8");

　　1.三、在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.四、固然實際工做中後臺不可能傳輸這麼簡單的一句話，每每是嵌套的數組或者對象之類的JSON數據，那麼他們該怎麼傳遞呢？

　　　　1.4.一、其實這個傳輸方式都同樣，做者都以最簡單的 echo 方式傳輸，只要將須要的數據進行壓縮編碼成字符串，前端來請求接收就能夠。

　　　　1.4.二、對於前端怎麼處理這個json數據，很簡單，接下來分別講述一下。

　　　　1.4.三、首先，編寫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.四、接下來說一下在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>