转载自：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. 如何看一个VC工程具体是什么工程？

    VC6等可以创建MFC, Win32等工程,拿到一个工程,怎么判断是什么工程呢? VC6全文检索看看有没有theApp 如果有一般就是MFC的 (VS?)看看工程设置,入口点函数写的是什么,/subs ...

  2. Elasticsearch教程（七） elasticsearch Insert 插入数据（Java）

    首先我不赞成再采用一些中间件(jar包)来解决和 Elasticsearch  之间的交互,比如 Spring-data-elasticsearch.jar 系列一样,用就得依赖它.而 Elastic ...

  3. 怪异恼人的java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream问题的解决

    测试以前做的一个邮件发送类,出现以下问题: Exception in thread "main" java.lang.NoClassDefFoundError: com/sun/m ...

  4. Android 珍藏(一)

    1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.ACTI ...

  5. PS 如何制作Vista的毛玻璃效果

    1 对一个图像的任意一部分新建一个选区   2 对选中区域进行高斯模糊,大小为5像素   3 再次新建一个图层,填充为深蓝色(#E9E7E3),填充为10%-15%.高斯模糊0.5像素.   4 再对 ...

  6. 改进xutils下载管理器，使其，在随意地方进行进度更新，以及其它状态监听操作

    1.前面在做下载进度监听.尝试过,通过加入 弱引用的View进度条,到相应的集合. 等到要进行更新进度的时候.通过Key 获取相应的VIew来进行更新 进度条.效果是达到了,可是我们怎样来监听其它的状 ...

  7. MySQL的四种变量类型

    一.全局变量在系统运行期间动态更改其参数,重启后失效.SET GLOABL var=XXX;SET @@global.var=XXX;以上两种方式等效 查看系统的全局变量show global var ...

  8. C++11之右值引用（三）：使用C++11编写string类以及“异常安全”的=运算符

    前面两节,说明了右值引用和它的作用.下面通过一个string类的编写,来说明右值引用的使用. 相对于C++98,主要是多了移动构造函数和移动赋值运算符. 先给出一个简要的声明: class Strin ...

  9. Vue mixins extend

    const mixins = { created () { console.log('mixins created') } } const mixins2 = { created () { conso ...

  10. Hbase 目录树

    转自 http://www.cnblogs.com/nexiyi/p/hbase_on_hdfs_directory.html 总所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系 ...