1.
Web前端后端傻傻分不清
原创 2016年12月25日 19:50:08
- 7178
- 0
- 2
前言
??做C开发将近六年，基本上没有接触过web相关的东西，原来听别人说web相关的东西的时候也是分不太清楚到底哪个是前端哪个是后台，前端和后台又是怎么配合着工作的？经过各方法搜索，很多类似的疑问终于得以弄明白。
??使用html、Javascript写的是Web前端，它不用向服务器(比如apache、nginx、tomcat等)交互在浏览器端就执行完了，比如使用Javascript弹出一个警告框的效果。而php、Python等是后台语言，当通过浏览器向服务器发送访问php文件的请求时（比如：http://localhost:63342/php_basic/helloworld.php），由web服务器收到请求，发现是php代码则交给php解析器完成解析，然后发回给web服务器，最后返回给浏览器。
??本文章将简单介绍前端和后台的工作流程，以及get和post方式的使用。
示例代码
??下面结合代码演示前端和后台配合工作流程。
GET方式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="process.php"></script>
<script>
function InputCheck(){
var user = document.getElementById("user");
if(user.value==""){
alert("用户名为空！");
return false;
}
var pwd = document.getElementById("password");
if(pwd.value==""){
alert("密码不能为空！")
return false;
}
}
</script>
</head>
<body>
<form name="myform" method="get" action="process.php">
<label for="user">用户名</label>
<input type="text" id="user" name="user" value="user">
<br />
<label for="password">密码</label>
<input type="password" id="password" name="password" value="password">
<br />
<input type="submit" id="submit" name="submit" value="提交" onclick="return InputCheck()">
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
??From的method定义了提交方式为get，在点击“提交”按钮时就会把数据传给后台，点击的时候会调用javascript函数InputCheck()检查输入框是否为空，如果为空就跳出警告框，后续不再往服务端发送消息。
??当两个输入框都有内容时，点击“提交”按钮就会把数据传到后台，而具体执行哪个php是由Form中的action指定的，这里指定的是process.php，process.php代码如下显示。
<?php
/**
* Created by PhpStorm.
* User: sweird
* Date: 2016/10/10
* Time: 22:18
*/
header("Content-Type:text/html;charset=utf-8");//支持中文
$user=$_GET["user"];
$pwd=$_GET["password"];
echo "这是从web服务器返回的消息，已经经过php处理的！<br />";
echo "您提交的用户名是：",$user,"<br />";
echo "您提交的密码是：",$pwd;
?>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
??下面看下运行效果，本次使用phpstorm开发，代码写完后点击右上角的火狐浏览器图标。 
??此时跳到火狐浏览器中，按F12打开调试窗口并切换到网络界面。 
??然后清除掉用户名输入框中的内容，再点击“提交”，此时就触发了javascript代码跳出一个警告窗口，并且发现在“网络”界面的调试窗口并没有数据，说明此时没有向服务端发送数据，而是在前端就进行了js检验。 
??然后在“用户名”输入框中输入数据，点击提交。 
??此时在地址栏中发现已经执行了process.php，并且显示出了用户名和密码，而在浏览器中显示的数据正是后台PHP代码打印出来的，至此前端和后台的操作已演示完毕。 
POST方式
??下面再来看下使用post方法时php是如何获取前端发送的数据的？
??从上面使用get方法可以看到，如何要向服务端提交类似密码这样的敏感信息时，那么是非常不保密的，因为在URL中就显示了密码，那么此时最好的办法就是用post方式向后台提交数据，post不会显式的输出密码，但如果打开调试窗口照样是可以看到密码的。
??但是使用POST时需要把相关的php代码放到wamp的www目录，否则会出现如下错误提示： 
??把php挪到如下目录，再确保服务器正常启动： 
??然后在浏览器中手动输入：http://localhost/post_demon.php 
??再点“提交”就出现如下成功的界面: 
相关代码
post_demon.php代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="process_post_data.php"></script>
</head>
<body>
<form name="myform" method="post" action="process_post_data.php">
<label for="user">用户名</label>
<input type="text" id="user" name="user" value="user">
<br />
<label for="password">密码</label>
<input type="password" id="password" name="password" value="password">
<br />
<input type="submit" id="submit" name="submit" value="提交" onclick="return InputCheck()">
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
process_post_data.php代码如下:
<?php
/**
* Created by PhpStorm.
* User: sweird
* Date: 2016/10/13
* Time: 21:30
*/
header("Content-Type:text/html;charset=utf-8");
$name=$_POST["user"];
$pwd=$_POST["password"];
echo "这是从web服务器返回的消息，已经经过php处理的！<br />";
echo "您提交的用户名是：",$name,"<br />";
echo "您提交的密码是：",$pwd;
?>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
版权声明：本文为博主原创文章，可自由转载，转载请注明出处：http://blog.csdn.net/rosetta举报
- 标签：
- javascript /
- html /
- php /
- get和post /
- web前端 /