Web前端后端傻傻分不清,

发布时间：2023-09-06 01:12责任编辑：郭大石关键词：Web 前端后端

Web前端后端傻傻分不清

原创 2016年12月25日 19:50:08

前言

??做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;?>

标签：
javascript /
html /
php /
get和post /
web前端 /

Web前端后端傻傻分不清,

原文地址：http://www.cnblogs.com/Study02/p/7541381.html

Web前端后端傻傻分不清,

Web前端后端傻傻分不清

前言

示例代码

GET方式

POST方式

相关代码

知识推荐