前言

做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

再点“提交”就出现如下成功的界面:

Web前端后端傻傻分不清相关推荐

看一看：不同Web前端框架的优缺点分别是什么？
移动互联网的快速发展,多屏互动和多端兼容友好的界面成为目前所有系统重要的需求,Web前端开发工程师成为目前市场紧俏.火爆的人才.正在从事Web前端工作的小伙伴们一定不会对Web前端框架陌生,那么这么多 ...
国防大学计算机学院,国防大学和国防科技大学是同一所学校吗？很多人傻傻都分不清！...
国防大学和国防科技大学,这两所大学名字相近,极易混淆,在很多网站搜索"国防大学录取分数线",出来的全是国防科技大学的的高考录取分数线,所以给广大考生带来了很大困惑,难道国防大学和国 ...
web前端后端的连接：Servlet简单演示
一.简介 1.项目中我们一般使用IDEA用作后端开发,HBuilderX用作前端开发.要实现前后端的连接,需要通过Servlet来实现. 2.什么是servlet呢? Servlet(Server A ...
python web前端后端页面详解
HTML DOM elements 集合: 第一栏:elements是基础元素:(网页源代码) 这几个参数都比较重要:在基础入门web的时候,判断出问题需要找这几个参数: elements.resou ...
傻傻分不清的Manifest
在前端,说到manifest,其实是有歧义的,就我了解的情况来说,manifest可以指代下列含义: html标签的manifest属性: 离线缓存(目前已被废弃) PWA: 将Web应用程序安装到设 ...
Session/Cookie/Token还傻傻分不清？
Cookie.Session.Token 傻傻分不清 Session/Cookie/Token 还傻傻分不清? 相信项目中用JWT Token的应该不在少数,但是发现网上很多文章对 token 的介绍 ...
让人傻傻分不清的TDD、ATDD、BDD
前言导入作为一名软件开发从业者,想必你肯定听过以下名词: "TDD" "UTDD" "ATDD" "BDD" &qu ...
国家电网和南方电网还傻傻分不清？
参看:都2020年了,国家电网和南方电网还傻傻分不清? 一.名称不同一个叫南方电网,一个叫国家电力电网,虽然都是电网,但是区别还是很大的而且成立时间不一样:国家电力电网有限公司成立于2002年12 ...
Web前端与HTML5有什么区别，百分之八十的人分不清
说到Web前端,很多人想到的就是HTML5,加上现在APP和小程序盛行,Web前端开发和HTML5开发都异常火热.外行人很容易将HTML5和Web前端划等号,那Web前端和HTML5是否一样?有些人已 ...

Web前端后端傻傻分不清

前言

示例代码

GET方式

POST方式

相关代码

Web前端后端傻傻分不清相关推荐

最新文章

热门文章