关于wamp的HTML， PHP， mysql 三者的操作与联系 - HTML与PHP之间传值（上）
Posted 浪里小韭菜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于wamp的HTML， PHP， mysql 三者的操作与联系 - HTML与PHP之间传值（上）相关的知识，希望对你有一定的参考价值。
上一章简单说了一下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传值
以上是关于关于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)