关于wamp的HTML, PHP, mysql 三者的操作与联系 - HTML与PHP之间传值(上)

Posted 浪里小韭菜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于wamp的HTML, PHP, mysql 三者的操作与联系 - HTML与PHP之间传值(上)相关的知识,希望对你有一定的参考价值。

  上一章简单说了一下wamp的按照和配置,相信大部分同学已经按照好了,今天正式讲一下htmlphp之间的传值。

  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之间传值(上)的主要内容,如果未能解决你的问题,请参考以下文章

关于wamp的HTML, PHP, mysql 三者的操作与联系 - HTML与PHP之间传值(上)

关于wamp的HTML, PHP, mysql 三者的操作与联系 - HTML与PHP之间传值(下)

PHP开发环境WAMP(Windows+Apache+MySQL+PHP)搭建

Wamp 中的 Python 3.3 (Apache 2.4.2 – Mysql 5.5.24 – PHP 5.4.3)

wamp环境单独安装(windows下apache2.4mysql5.5php5.5的版本)

Index.php 有效,而 Index.html 不适用于 WAMP 上的本地主机