转载自：http://blog.csdn.net/rosetta/article/details/53871766
前言
做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>
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; ?>
下面看下运行效果，本次使用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>
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; ?>