转载自：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.10.13 git提交时忽略不必要的文件或文件夹

    参考来自:git学习六:git提交忽略不必要的文件或文件夹 1.应用场景 创建maven项目,使用git提交,有时需要忽略不必要的文件或文件夹,只保留一些基本. 例如如下截图,实际开发中我们只需提交: ...

  2. python获取输入参数

    python获取输入参数 学习了:https://www.cnblogs.com/angelatian/p/5832448.html import sys模块: len(sys.argv)参数个数 s ...

  3. PHP防止sql注入-JS注入

    一:为了网站数据安全,所有和数据库操作的相关参数必须做相关过滤,防止注入引起的网站中毒和数据泄漏 1.PHP自带效验函数 mysql_real_escape_string() 函数转义 SQL 语句中 ...

  4. 倒计时:CountDownLatch(火箭发射前的准备)读书笔记

     这是一个非常实用的多线程控制工具类,经典的场景就是 火箭发射,在火箭发射前,为了保证万无一失,往往还要进行各项设备,仪器的检查,只有等待所有的检查完毕后,引擎才能点火,      CountDown ...

  5. python实现大文件分割与合并

    小U盘传大电影时可以免去用winrar分割文件时的压缩和解压缩过程. file.py import sys from os.path import exists fileCount = 0 def s ...

  6. HTML基础知识总结一

    一.HTML是什么? HTML是超文本标记语言的英文缩写,"超文本"就是指页面内能够包括图片.链接.甚至音乐.程序等非文字元素.超文本标记语言的结构包括"头"部 ...

  7. Android给力模拟器，秒杀原生模拟器到渣

    1 http://www.eoe.cn/news/17433.html?f_section=new&f_section=new 备注:1秒开机,操作超流畅

  8. hdu 4417,poj 2104 划分树（模版）归并树（模版）

    这次是彻底把划分树搞明确了,与此同一时候发现了模版的重要性.敲代码一个字符都不能错啊~~~ 划分树具体解释:点击打开链接 题意:求一组数列中随意区间不大于h的个数. 这个题的做法是用二分查询  求给定 ...

  9. swift中代理的使用

    1.首先定义一份协议. protocol HttpToolProrocol{ //1.代理方法,将server返回的字典传递给调用者 func didRecieveResults(result:NSD ...

  10. HTML5 2D平台游戏开发#6地图绘制

    此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-base ...