关于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>

　　刷新页面，能够看出页面会出现这行：

　　PHP向HTML传值基本就这样，下一章讲解HTML向PHP传值