转载自：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;

?>
 

区分Web前端和后端（转载）的更多相关文章

  1. [转载]Web前端和后端之区分，以及面临的挑战

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  2. [转载]Web前端和后端之区分，以及面临的挑战【转】

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  3. Web前端和后端之区分，以及…

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  4. Web前端和后端开发的区别和要求

    Web前端和后端开发的区别和要求 有时候自己会分不清,其实是因为前后端都了解,类似于全栈工程师,但又什么都不是很精通.那到底什么是前端.后端呢,我整理了一些企业要求级别的前端/后端基础,开发框架等. ...

  5. web前端与后端的理解区分

    要了解web前后端的区别,首先必须得清楚什么是web前端和web后端. 首先:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思.现广泛译作网络.互联网等技术领域.表现为三种形式,即超文本 ...

  6. web前端与后端

    Web前端:     1)精通HTML,能够书写语义合理,结构清晰,易维护的HTML结构.     2)精通CSS,能够还原视觉设计,并兼容业界承认的主流浏览器.     3)熟悉JavaScript ...

  7. web前端和后端的区别

    一句话,展示ui相关的就是前端,否则就是后端. 前端语言:javascript.css和html. 后端就是一些服务.

  8. 前端与后端数据交互的方式之ajax

    前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...

  9. web也是区分前端与后端的，session\cookie辨析

    <1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对 ...

随机推荐

  1. zabbix2.2.22 升级3.0.18

      环境说明 系统版本 CentOS 7.2 x86_64 zabbix2.2.22界面如下 升级过程: 清除之前的zabbix的yum源缓存 [root@zabbix ~]# yum clean a ...

  2. 7. JPA - Hibernate【从零开始学Spring Boot】

    转载:http://blog.csdn.net/linxingliang/article/details/51636976 在说具体如何在spring boot 使用hibernate前,先抛装引玉些 ...

  3. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. Nginx:HTTP过滤模块

    参考资料<深入理解Nginx> HTTP过滤模块也是一种HTTP模块,与普通HTTP处理模块不同在于: 1.一个请求仅由一个HTTP处理模块处理,而可以被任意个HTTP过滤模块处理 2.普 ...

  5. MongoDB在Win10下的安装

    原文地址:http://blog.csdn.net/polo_longsan/article/details/52430539 1.下载MongoDB在windows下的安装文件 首先去官网https ...

  6. NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤

    转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrol ...

  7. 转 WCF WebService区别

    下面我们来详细讨论一下二者的区别.Web Service和WCF的到底有什么区别. [1]Web Service:严格来说是行业标准,也就是Web Service 规范,也称作WS-*规范,既不是框架 ...

  8. <交流贴>android语音识别之科大讯飞语音API的使用

      因为最近在研究语音识别,所以借鉴了一下CreAmazing网友的帖子 Android系统本身其实提供有语音识别模块,在它的APIDemo里也有关于语音识别的sample,不过经过大多开发者的真机测 ...

  9. Nginx之红黑树

    /*  * Copyright (C) Igor Sysoev  * Copyright (C) Nginx, Inc.  */ #ifndef _NGX_RBTREE_H_INCLUDED_ #de ...

  10. tomcat启动之后报404

    启动之后什么异常都没有,但是就报404,很伤,为此和女朋友分了手. 如果项目以前还是可以正常运行的话,不妨试下下面这个办法: 停止tomcat,把tomcat下面的项目删除掉,之后右键单击项目,run ...