转载自：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. HUNAN Interesting Integers(爆力枚举)

    Undoubtedly you know of the Fibonacci numbers. Starting with F1 = 1 and F2 = 1, every next number is ...

  2. js 导入json配置文件

    import AA from './menu.json' console.log(AA) 匹配好路径

  3. JavaScript 数组去重 方法汇总

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

  4. TCP应用程序通信协议的处理

    TCP应用程序通信协议的处理 flyfish 2015-6-29 一 流式处理 TCP是一种流协议(stream protocol).TCP数据是以字节流的形式传递给接收者的,没有固有的"报 ...

  5. Install RabbitMQ server in CentOS 7

    About RabbitMQ RabbitMQ is an open source message broker software, also sometimes known as message-o ...

  6. .net 定时服务

    namespace MvcApplication1 { public class MvcApplication : System.Web.HttpApplication { protected voi ...

  7. linux系统下使用apt-get install 方法安装lamp环境

    1.更新源,获得最近的软件包的列表,列表中包含一些包的信息,比如这个包是否更新过. sudo apt-get update 2.更新系统中已安装的软件包 sudo apt-get upgrade 3. ...

  8. Memcache针对不同场景数据应用缓存策略

    Memcache主要的作用是为减轻大访问量对数据库的冲击,所以一般的逻辑是首先从memcache中读取数据,如果没有就从数据库中读取数据写入到memcache中,等下一次读取的时候就可以从memcac ...

  9. Convert to a source folder or rename it.

    从GitHub上恢复之前的版本  eclipse 报错: Convert to a source folder or rename it. 网上找了答案 : 找到了这个 1. 删除gen文件. 2.选 ...

  10. SVN 钩子操作-同步更新web目录

    一个简单的钩子演示:也可以网上搜索其他高级的 本次想要达到的功能是:每次用户commit 到仓库后,仓库的钩子会自动把程序又更新的www/的web发布目录 1.现在web目录下创建一个test.com ...