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

時間 2019-11-12

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

原文原文鏈接

　　上一章講了PHP向HTML傳值的簡單應用，這章簡單講解HTML向PHP傳值的兩種形式，也就是上章提到了兩種狀況。php

　　一、表單的提交html

　　　打開E:/work/PHPtest/,能夠新建兩個文件 form.html 和 form.php前端

　form.html：mysql

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- action指向接收表單數據的地址， method是發送的方式 -->
    <form action="./form.php" method="post">
        userName: <input type="text" name="name"><br/>
        passWord: <input type="password" name="password"> <br/>

        <!-- 多選下拉框 多選項，name對應的是一個數組 multiple是表示能夠多選-->
        <!-- city: <select name="city[]" id="city" multiple="multiple"> -->
            
        city: <select name="city" id="city">
            <option value="0">請選擇</option>
            <option value="深圳">深圳</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
        </select>
　　　　　<br/>

        <input type="file" name="file" id="file"><br/>
        <br/>

        like: <input type="radio" name="like" value="apple">apple
        <input type="radio" name="like" value="banana">banane
        <input type="radio" name="like" value="orange">orange
        <input type="radio" name="like" value="tomatoes">tomatoes
        <br/>

        <!-- 多選項，name對應的是一個數組 -->
        owner: <input type="checkbox" name="owner[]" vaule="BMW">BMW
        <input type="checkbox" name="owner[]" value="house">Villa
        <input type="checkbox" name="owner[]" value="money">dollar
        <input type="checkbox" name="owner[]" value="gender">female
        <br/>

        <input type="submit" value="提交">
    </form>

</body>
</html>

　　注：多選項的時候，name = arr[] （數組）。jquery

　　form.php ：ajax

<?php
    header("content-type: text/html; charset=utf-8"); //防止中文亂碼

    // 定義變量來接收傳遞過來的數，表單使用POST傳遞，接收使用 $_POST[]
    $userName = $_POST["name"];
    $password = $_POST["password"];
    $city = $_POST["city"];
    $like = $_POST["like"];
    $owner = $_POST['owner'];
    $file = $_POST['file'];

    // 將這些數據放入數組中
    $arr = array("userName" => $userName, "password" => $password, "city" => $city, "like" => $like, "owner" => $owner, "file" => $file);

    //打印
    echo json_encode($arr);
?>

　　打開瀏覽器輸入： myserver/PHPtest/form.html ,填寫表單，而後提交，頁面會調到form.php,這是你看到的PHP中已經打印出傳輸過來的數據。sql

　　這說明HTML向PHP傳遞成功。json

　　二、將HTML中特定的數據傳輸給PHP，使用ajax數組

<!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>
        <button id="btn">提交</button>
        <script>
            $("#btn").click(function(){

                // 這個數據爲模擬數據，可根據實際狀況自行組合成對象
                var obj = {"id": 1, "item": {"name": "ject", "age": "25"}};
                
                // 將收集的數據obj發送出去
                $.post("./test.php", obj, function(data){
                    //接收返回值
                    var res = JSON.parse(data);

                    // 能夠打印出來看一看
                    console.log(res);
                })
            })
        </script>
    </body>
</html>

　　form.php瀏覽器

<?php
    // 一、依次單一變量接收
    // $id = $_POST["id"];
    // $name = $_POST["name"];

    // echo json_encode($id);
    // echo json_encode($name);

    // 二、直接存儲到數組中
    $arr = array("id" => $_POST["id"], "item" => $_POST["item"]);

    // 把接受的值能夠傳遞個前端，這個能夠根據實際狀況，在PHP中進行數據處理，將前端須要的數據傳遞過去
    echo json_encode($arr);
?>

　　打開瀏覽器輸入： myserver/PHPtest/form.html ,刷新，點擊提交，打開控制檯，能夠看到返回來的數據：

　　這個循環可知，數據發送到form.php,而後又返回給form.html， HTML與PHP進行了雙向傳遞。

　　補充：在form.php對數據進行處理，以下：

　　對form.php進行改動：

<?php
    // 直接存儲到數組中
    $arr = array("id" => $_POST["id"], "item" => $_POST["item"]);

    // PHP中鏈接符號是 「 . 」 點號
    $str = "I am ".$arr["id"].", my name is ".$arr['item']['name'].", ".$arr['item']['age']." years old.";

    // 把接受的值能夠傳遞個前端，這個能夠根據實際狀況，在PHP中進行數據處理，將前端須要的數據傳遞過去
    echo json_encode($str);
?>