PHP与Web页面交互
1. PHP Web编程基础
PHP与Web 页面的交互过程
客户端的浏览器和服务器行通信时，需遵循定一定的规程或协议，浏览WWW使用的是HTTP协议（即超文本传输协议）；
浏览网页的过程就是一系列请求/响应的过程：用户用浏览器浏览一个 Web 站点，先通过网址向网络中的某台服务器发出请求，请求浏览某个页面；服务器再找到这个页面后，在响应中返回相应页面的内容；
在浏览网页的过程中，当用户需要与服务器进行交互时，可通过客户端浏览器返回的HTML页面及嵌入HTML页面的 PHP 代码传入数据，输入的内容会从客户端传送到服务器；
PHP是一种运行在服务器端的语言，经过服务器端的PHP程序进行处理后，再将用户请求信息返回给客户端浏览器；
例子：做一个简单的交互实例
<html>
<head>
<title>例子</title>
</head>
<body>
<?php
if($_SERVER['REQUEST_METHOD']=='POST')
{
echo "用户：".$_POST['name']."<br>";
echo "密码：".$_POST['password']."<br>";
exit;
}
?>
<form action="login.php" method="post">
<p>用户：<input type="text" name="name" /></p>
<p>密码：<input type="password" name="password" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>
执行结果如下所示：
2. Web 表单
Web 表单是一个使用 HTML 表单收集用户输入的不同类型数据，并发送数据到服务器的工具，是用户和服务器进行互动的平台；
2.1 创建表单
使用 <form> 标签，在 HTML 标记间插入 <from> 和 </form> ，就能创建一个表单；
表单的基本构造如下：
<from name="name" method="method" action="url" enctype="value" target="target" id="id">
...... //插入的表单元素
</from>
<from> 标签的常用属性如下表
target 属性如下表
如，创建一个名为“registr”的表单，以POST方法提交到数据处理页面check_in.php，返回信息显示在当前页面上；
代码如下：
<form name="register" action="check_in.php" method="post" target="_blank">
......//插入的表单元素
</from>
使用 Web 表单时，需为其指定行为属性 action，用来指定提交数据的处理页面；
2.2 认识表单元素
表单（from）是由表单元素组成，表单元素是指表单中的一些元素标签，常用的元素标签有：
输入域标签 、文本域标签 、选择域标签和等，这些元素用来提供用户输入的可视化界面；
例子：表单元的应用
<html>
<head>
<title>表单元素的应用</title>
<body>
<form>
账号：<input name="Username" type="text" ><br>
密码：<input name="Password" type="password" ><br>
男 <input name="Sex" type="radio" value="男"><br>
羽毛球 <input name="Hobby" type="checkbox"><br>
<input name="Upload" type="file"><br>
<input name="Login" type="submit"><br>
<input name="Girl" type="image"><br>
<input name="Clean" type="reset"><br>
</form>
</body>
</head>
</html>
执行结果如下所示：
表单元一般都有 name 和 type 属性，name 是指输入域的名称，type 是指输入域的类型，可指定不同的表单元素；
<input type=""> 标签共提供了始终输入域，如下表所示
当表单提交时，表单元素的 value 属性所对应的值将会被传送至服务器，对于文本域的 value 属性，其值就是用户输入的数据；
3. PHP 与 Web 页面交互的基本方法
3.1 访问和获取 Web 表单数据
提交表单数据的两种方法：POST 方法和 GET 方法；
用哪种方法提交数据由表单 <form> 的 method 属性值决定；
PHP 通过两个预定义的变量 $_GET 和 $_POST 获取用户提交的表单数据， $_GET 和 $_POST 都是 PHP 的自动全局变量，可直接在 PHP 程序中使用；
- 变量 $_GET 是由表单数据组成的数组变量，数据 $_GET [ ] 中保存了由表单的 GET 方法提交的数据，数据的 ”键“
就是表单元素的名称；即通过表单元素的名称（name 属性的值） - 变量 $_POST 同样是数据变量，用来获取及保存表单以 POST 方法提交的数据，用法和变量 $_GET类似。
$username = $_GET['username']
$username = $_POST['username']
$username 表示接收数据的变量名，$_GET['username'] 和 $_POST['username'] 分别表示接收的以 GET 方法和 POST 方法提交的数据；
username 表示输入域的名称，用于标识接收的是哪个域的数值；
所以，对表单元素命名时，注意不要重名，避免在获取输入值时出错；
例子: 简单的表单示例
17-19.php
<html>
<head>
<title>例子2</title>
</head>
<body>
<table style="border: 1px solid black" align="center"> <!--边框为1 黑色 居中-->
<tr>
<td align="left"> <!--内容居中-->
<form name="form1" action="17-47.php" method="post"> <!--调用 17-47.php-->
<label for="">用 户：</label>
<input type="text" name="username"><br><br>
<label for="">密 码：</label> <!-- 空格-->
<input type="password" name="password"><br><br>
<label for="">确认密码：</label>
<input type="password" name="repasword"><br><br>
<label for="">性别：</label>
<input type="radio" name="gender" value="男" checked="checked">男
<input type="radio" name="gender" value="女">女<br><br>
<label for="">兴趣爱好：</label>
<input type="checkbox" name="interest[]" value="阅读">阅读
<input type="checkbox" name="interest[]" value="电竞">电竞
<input type="checkbox" name="interest[]" value="攀岩">攀岩
<input type="checkbox" name="interest[]" value="瑜伽">瑜伽
<input type="checkbox" name="interest[]" value="慢跑">慢跑<br><br
<label for="">职业：</label>
<select name="occup"><option value="医生">医生</option>
<option value="警察">警察</option>
<option value="商人">商人</option>
<option value="工人">工人</option>
<option value="白领">白领</option>
<option value="自由职业">自由职业</option>
</select><br><br>
<input type="submit" type="submit" value="提交数据">
</form>
</td>
</tr>
</table>
</body>
</html>
17-47.php
<?php
$username = $_POST['username']; //获取用户
$password = $_POST['password']; //获取密码
$repassword = $_POST['repassword'];
$gender = $_POST['gender']; //获取性别
$interest = $_POST['interest']; //获取兴趣爱好
$occup = $_POST['occup']; //获取职业
echo "账号：".$username."<br/>";
echo "密码：".$password."<br/>";
echo "性别：".$gender."<br/>";
echo "兴趣爱好：".implode('、',$interest)."<br/>";
echo "职业：".$occup."<br/>";
?>
执行结果如下所示：
提交后结果
输出爱好时，使用PHP 语言的 implode() 函数 ，implode() 函数 的功能是将保存的数据元素中的兴趣爱好组成成字符串，中间给定的字符“、” 隔开；
也可以将 php 代码写进 HTML 中
例子：将 PHP 代码写进 HTML中
<html>
<head>
<title>例子2</title>
</head>
<body>
<table style="border: 1px solid black" align="center"> <!--边框为1 黑色 居中-->
<tr>
<td align="left"> <!--内容居中-->
<form name="form1" action="" method="post"> <!--调用 17-47.php-->
<label for="">用 户：</label>
<input type="text" name="username"><br><br>
<label for="">密 码：</label> <!-- 空格-->
<input type="password" name="password"><br><br>
<label for="">确认密码：</label>
<input type="password" name="repassword"><br><br>
<label for="">性别：</label>
<input type="radio" name="gender" value="男" checked="checked">男
<input type="radio" name="gender" value="女">女<br><br>
<label for="">兴趣爱好：</label>
<input type="checkbox" name="interest[]" value="阅读">阅读
<input type="checkbox" name="interest[]" value="电竞">电竞
<input type="checkbox" name="interest[]" value="攀岩">攀岩
<input type="checkbox" name="interest[]" value="瑜伽">瑜伽
<input type="checkbox" name="interest[]" value="慢跑">慢跑<br><br>
<label for="">职业：</label>
<select name="occup"><option value="医生">医生</option>
<option value="警察">警察</option>
<option value="商人">商人</option>
<option value="工人">工人</option>
<option value="白领">白领</option>
<option value="自由职业">自由职业</option>
</select><br><br>
<input type="submit" type="submit" value="提交数据">
</form>
</td>
</tr>
</table>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$username = $_POST['username']; //获取用户
$password = $_POST['password']; //获取密码
$repassword = $_POST['repassword'];
$gender = $_POST['gender']; //获取性别
$interest = $_POST['interest']; //获取兴趣爱好
$occup = $_POST['occup']; //获取职业
echo "账号：".$username."<br/>";
echo "密码：".$password."<br/>";
echo "性别：".$gender."<br/>";
echo "兴趣爱好：".implode('、',$interest)."<br/>";
echo "职业：".$occup."<br/>";
}
?>
</body>
</html>
3.2 Web 表单数据的有效输入
上面的代码在输入的密码为空时，会导致程序出现运行错误，但却没有任何提示；
例子：表示数据有效性验证程序
<html>
<head>
<title>例子2</title>
</head>
<body>
<table style="border: 1px solid black" align="center"> <!--边框为1 黑色 居中-->
<tr>
<td align="left"> <!--内容居中-->
<form name="form1" action="" method="post"> <!--调用 17-47.php-->
<label for="">用 户：</label>
<input type="text" name="username"><br><br>
<label for="">密 码：</label> <!-- 空格-->
<input type="password" name="password"><br><br>
<label for="">确认密码：</label>
<input type="password" name="repassword"><br><br>
<label for="">性别：</label>
<input type="radio" name="gender" value="男" checked="checked">男
<input type="radio" name="gender" value="女">女<br><br>
<label for="">兴趣爱好：</label>
<input type="checkbox" name="interest[]" value="阅读">阅读
<input type="checkbox" name="interest[]" value="电竞">电竞
<input type="checkbox" name="interest[]" value="攀岩">攀岩
<input type="checkbox" name="interest[]" value="瑜伽">瑜伽
<input type="checkbox" name="interest[]" value="慢跑">慢跑<br><br>
<label for="">职业：</label>
<select name="occupy"><option value="医生">医生</option>
<option value="警察">警察</option>
<option value="商人">商人</option>
<option value="工人">工人</option>
<option value="白领">白领</option>
<option value="自由职业">自由职业</option>
</select><br><br>
<input name="submit" type="submit" value="提交数据">
</form>
</td>
</tr>
</table>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username']; //获取用户名
//若用户名为空时，输出提示信息，并中断程序运行
if($username == ""){ //判断用户名是否为空
echo "<script>alert('用户名不能为空，请输入用户名！')</script>"; //弹出信息提示框
exit; //程序中断，不再向下执行
}
$password = $_POST['password']; //获取密码
if($password == ""){ //判断密码是否为空
echo "<script>alert('密码为空，请输入密码！')</script>";
exit;
}
$repassword = $_POST['repassword'];
if($password != $repassword){ //判断两次密码是否相同
echo "<script>alert('两次输入的密码不一致，请重新输入密码！')</script>"; //弹出信息提示框
exit; //程序中断，不再向下执行
}
$gender = $_POST['gender']; //获取性别，默认性别为男
$interest = $_POST['interest']; //获取兴趣爱好
if($interest == ""){ //若没有选择兴趣爱好
echo "<script>alert('兴趣爱好未选择，请选择！')</script>"; //弹出信息提示框
exit; //程序中断，不再向下执行
}
echo "用户：".$username."<br/>";
echo "密码：".$password."<br/>";
echo "性别：".$gender."<br/>";
echo "兴趣爱好：".implode('、',$interest)."<br/>";
$occupy = $_POST['occupy'];
echo "职业：".$occupy."<br/>";
exit;
}
?>
</body>
</html>
执行结果如下所示：
上述例子，利用条件语句判断输入值是否为空；
PHP 还提供了 empty()、is_numeric()、is_null()等函数，来进一步对表单提交的数据进行验证；
empty() 函数：检测变量是否有空值，空值包括空字符串、0、null 或 false；若具有空值，返回 TRUE；否则返回 FALSE；is_numeric() 函数：检测变量是否为数字或数字字符串，若是，返回 TRUE，否则返回 FALSE；is_null 函数： 检测变量是否为 null，在变量违背定义且值为 null 时，才返回 TRUE，否则返回 FALSE；- 例子： 利用函数对表单数据的有效性进行验证
<html>
<head>
<title>例子3</title>
</head>
<body>
<table style="border: 1px solid black " align="center">
<tr>
<td>
<form action="17-19.phtml" method="POST">
<label for="">姓名：</label>
<input type="text" name="username" /><br><br>
<label for="">年龄：</label>
<input type="text" name="age" /><br><br>
<input type="submit" name="sumbit" value="提交" />
</form>
</td>
</tr>
</table>
</body>
</html>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$username = $_POST['username']; //获取姓名
if(empty($username)){ //判断提交的姓名是否为空
echo "<script>alert('姓名不能为空，请重新输入！')</script>"; //弹出消息提示框
exit; //程序中断，不再向下执行
}
$age = $_POST['age']; //获取年龄
if(empty($age)){ //判断年龄是否为空或0
echo "<script>alert('年龄不能为空，请重新输入！')</script>"; //弹出消息提示框
exit; //程序中断，不再向下执行
}
if(!is_numeric($age)){ //判断输入的年龄是否为数字
echo "<script>alert('年龄只能为数字，请重新输入！')</script>"; //弹出消息提示框
exit; //程序中断，不再向下执行
}
echo "姓名：".$username."<br>";
echo "年龄：".$age."岁"."<br>";
exit;
}
?>
执行结果如下所示：
若姓名为空，执行结果如下所示
3.3 Web 表单的安全性验证
例子：表单安全性漏洞
<html>
<head>
<title>例子4</title>
<style>
#wn{
padding: 50px; /*距离页面50px*/
}
#zh {
width: 200px;height: 200px; /*表格的宽高*/
border: 2px solid black; /*边框宽度，实线，黑色*/
}
</style>
</head>
<body>
<div id="wn">
<div id="zh" align="center">
<form action="17-19.phtml" method="POST">
<br><label for="">请输入留言：</label><br/><br/> <!--<br> 换行-->
<textarea name="content" style="height: 80px"></textarea><br/><br/>
<input type="submit" value="提交">
</form>
</div>
</div>
</body>
</html>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
echo "您输入的留言是：".$_POST['content']."<br>"; //用 POST 方法输出 留言
exit;
}
?>
若访问者在留言栏中输入以下内容：
<script> while(true)alert("Hello,Wodld!")</script>
点击“提交” 按钮，此时条的是一段可执行的代码，代码会在服务器段执行，页面中会循环出现对话框（bug），会导致页面无法正常浏览；
上述例子的代码中，只是加入了一段脚本和一个提示命令，页面加载后，会执行 JavaScript 代码，会在页面上循环弹出对话框；
黑客能把用户重定向到另一台服务器上的某个文件，该文件中的恶意代码能更改全局变量或将表单提交到其他地址以保存用户数据，甚至可植入性危害更大的木马等；
为了解决网页的数据安全问题，PHP 提供了 strip_tags() 和 htmlentities() 函数，这两个函数可过滤表单数据；
strip_tags() 函数：去除字符串中的 HTML 标记和 PHP 标记；htmlentities() 函数：将字符转换为 HTML 实体，即把 HTML 标记和 PHP 标记转换成字符，以文本行输出；
例子：表单数据安全性校验
<html>
<head>
<title>例子4</title>
<style>
#wn{
padding: 50px; /*距离页面50px*/
}
#zh {
width: 200px;height: 200px; /*表格的宽高*/
border: 2px solid black; /*边框宽度，实线，黑色*/
}
</style>
</head>
<body>
<div id="wn">
<div id="zh" align="center">
<form action="17-19.phtml" method="POST">
<br><label for="">请输入留言：</label><br/><br/> <!--<br> 换行-->
<textarea name="content" style="height: 80px"></textarea><br/><br/>
<input type="submit" value="提交">
</form>
</div>
</div>
</body>
</html>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
echo "您输入的留言是：".htmlentities($_POST['content'],ENT_NOQUOTES,UTF-8)."<br>"; //用 POST 方法输出 留言
exit;
}
?>
执行结果如下所示：
从上述例子可看出，使用函数 htmlentities() 过滤后，输入的 JavaScript 代码都按照文本形式被正常输出了；
对输入的数据进行安全性校验，可使用网页的安全性得到有效保证；
3.4 PHP 文件上传处理
文件上传和数据上传，常使用 POST 方法；
文件上传过程中，要将表单的 enctype 属性为 “multipart/form-data”，代码如下所示：
<form name="name" enctype="multipart/form-data" method="method" action="url" target="target">
...... //表单数据
</form>
PHP 程序中使用全局变量 $_FILES 处理文件上传；$_FILES 是一个数组，包含上传文件的而信息；
$_FILES['myFile']['name']：客户端文件的原始名称，即要上传文件的文件名；myFile 是表单中文件域表单元素的 name 属性值，如下所示：<input name="myFile" type="file" />$_FILES['myFile']['type']：上传文件的类型，如 “imag/png”，需要浏览器提供支持；$_FILES['myFile']['size']：已上传文件的大小，单位为字节；$_FILES['myFile']['tmp_name']：文件被上传后在服务器端存储的临时文件名，一般由系统默认；可在 php.ini 的 upload_tmp_dir 选项中指定；$_FILES['myFile']['error']：和文件上传相关的错误代码；
以下是代码信息的说明：
UPLOAD_ERR_OK值：0 —— 没发生错误，文件上传成功；
UPLOAD_ERR_INI_SIZE值： 1 —— 上传文件大小超过 php.ini 的 upload_max_filesize 选项限制的值；
UPLOAD_ERR_FORM_SIZE值： 2 —— 上传文件大小超过 HTML 表单中MAX_FILE_SIZE选项指定的值（可在表单中指定input = 'hidden' name = 'MAX_FILE_SIZE' value = '附件的最大字节数'）；
UPLOAD_ERR_PAREIAL值：3 —— 文件只有部分被上传；
UPLOAD_ERR_NO_FILE值： 4 —— 没有文件被上传
文件上传结束后，会被存储到服务器的默认临时目录中，可配置文件 php.ini 的 upload_tmp_dir 选项中设置文件删除默认临时保存的目录；
上传后需将文件从临时文件中删除或到其他地方，否则会被自然删除；
文件上传是否成功，脚本执行完后，临时目录里的文件肯定会被删除；所以上传文件后，要用PHP 的 move_uploaded_file() 或 copy() 函数将上传文件复制或移动到其他位置，这时才算完成上传文件的全过程；
move_uploaded_file() 函数的参数如下：
move_uploda_file($_FILES['myfile']['tmp_name'],dest_name)
$_FILES['myfile']['tmp_name'] 是上传文件时在服务器上存储临时文件名；
dest_name 是移动后的目标文件名，目标文件名需包含路径信息；
若上传的文件不合法，或由于某些原因无法移动文件，函数会返回 FALSE；
例子： 上传图片并预览
<html>
<head>
<title>例子4</title>
<style>
#wn{
padding: 50px; /*距离页面50px*/
}
#zh {
width: 200px;height: 200px; /*表格的宽高*/
border: 2px solid black; /*边框宽度，实线，黑色*/
}
</style>
</head>
<body>
<div id="wn">
<div id="zh" align="center">
<form action="17-19.phtml" method="POST" enctype="multipart/form-data">
<p><input type="file" name="myfile" value="选择要上传的文件" ></p>
<input type="submit" value="上传" />
</form>
</div>
</div>
</body>
</html>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$name = $_FILES['myfile']['name'];
$type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型，并转换为小写
$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型
//判断文件类似是否被允许上传
if(!in_array($type,$allow_type)){
//若不被允许，提示类型不对并停止程序运行
echo "<script>alert('文件类型不对！请重新选择！')</script>";
exit;
}
$upload_path = 'time'; //上传文件存放路径
if(!file_exists($upload_path)){ //若路径不存在
mkdir("$upload_path",0700); //创建路径，0700为最大权限
}
//开始移动文件到相应文件夹中
$img_name = "time/".$name;
if(move_uploaded_file($_FILES['myfile']['tmp_name'],$img_name)){
echo "图片预览";
echo "<center><img style='width: 220px;'src='$img_name'></center>";
}
else{
echo "<script>alert('文件上传失败！请重新上传！')</script>";
exit;
}
}
?>
执行结果如下所示：
选择要上传的文件
图片预览
文件临时存放目录
结束语
若这篇文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有什么错误，欢迎大家指教。
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
