关于wamp的HTML， PHP， mysql 三者的操作与联系

　　上一章简单说了一下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传值