转载自：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. 2017.9.15 postgres使用postgres_fdw实现跨库查询

    postgres_fdw的使用参考来自:https://my.oschina.net/Kenyon/blog/214953 postgres跨库查询可以通过dblink或者postgres_fdw来完 ...

  2. Transportation poj1040

    Ruratania is just entering capitalism and is establishing new enterprising activities in many fields ...

  3. 倍福TwinCAT(贝福Beckhoff)基础教程2.2 TwinCAT常见类型使用和转换_枚举

    在Duts的文件夹上右击,可以声明一个枚举类型,按照格式填写所有类型(注意枚举的元素前面都是逗号,最后一个不需要符号)   在正常使用的时候,枚举的单词可以当全局变量来用     更多教学视频和资料下 ...

  4. Laravel服务/服务提供者/容器/契约和门面

    1.服务是什么? 服务是提供了一些功能的类,比如发送邮件,写日志. 2.Laravel服务提供者是什么? 服务提供者中指明了这个提供者可以提供哪些服务(注册服务),以及服务注册后默认调用一些方法(bo ...

  5. JavaScript变量提升 面试题

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

  6. android Activity的onPause()与onResume()

    官方文档地址:http://www.android-doc.com/training/basics/activity-lifecycle/pausing.html#Resume Pause和Resum ...

  7. 代理工具Charles使用

    代理工具Charles使用 分类: MAC 2014-03-27 20:41 7810人阅读 评论(2) 收藏 举报 手机开发 一.跟踪HTTPS 1.下载官方的证书ssl.zip证书,解压成*.cr ...

  8. CentOS上yum安装Nginx服务

    一.更改yum源为网易的源加快速度 vi /etc/yum.repos.d/CentOS-Base.repo更改内容如下 # CentOS-Base.repo # # This file uses a ...

  9. Sphinx之配置文件

    # # Sphinx configuration file sample # # WARNING! While this sample file mentions all available opti ...

  10. maven＋eclipse＋mac＋tomcat 多模块发布

    之前项目中有用到过maven,但是没运行过web的maven,所以这里记录一下. 项目的结构: ---master  //parent ---web-project // ---client-proj ...