做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方式的使用。
下面结合代码演示前端和后台配合工作流程。
<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>
From的method定义了提交方式为get,在点击“提交”按钮时就会把数据传给后台,点击的时候会调用javascript函数InputCheck()
检查输入框是否为空,如果为空就跳出警告框,后续不再往服务端发送消息。
当两个输入框都有内容时,点击“提交”按钮就会把数据传到后台,而具体执行哪个php是由Form中的action指定的,这里指定的是process.php,process.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处理的!
";
echo "您提交的用户名是:",$user,"
";
echo "您提交的密码是:",$pwd;
?>
下面看下运行效果,本次使用phpstorm开发,代码写完后点击右上角的火狐浏览器图标。
此时跳到火狐浏览器中,按F12打开调试窗口并切换到网络界面。
然后清除掉用户名输入框中的内容,再点击“提交”,此时就触发了javascript代码跳出一个警告窗口,并且发现在“网络”界面的调试窗口并没有数据,说明此时没有向服务端发送数据,而是在前端就进行了js检验。
然后在“用户名”输入框中输入数据,点击提交。
此时在地址栏中发现已经执行了process.php,并且显示出了用户名和密码,而在浏览器中显示的数据正是后台PHP代码打印出来的,至此前端和后台的操作已演示完毕。
下面再来看下使用post方法时php是如何获取前端发送的数据的?
从上面使用get方法可以看到,如何要向服务端提交类似密码这样的敏感信息时,那么是非常不保密的,因为在URL中就显示了密码,那么此时最好的办法就是用post方式向后台提交数据,post不会显式的输出密码,但如果打开调试窗口照样是可以看到密码的。
但是使用POST时需要把相关的php代码放到wamp的www目录,否则会出现如下错误提示:
把php挪到如下目录,再确保服务器正常启动:
然后在浏览器中手动输入:http://localhost/post_demon.php
再点“提交”就出现如下成功的界面:
post_demon.php代码如下
<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>
process_post_data.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处理的!
";
echo "您提交的用户名是:",$name,"
";
echo "您提交的密码是:",$pwd;
?>