表单用来接受用户的输入,并将用户的输入以“name=value值对”集合的形式提交到服务器进行处理。那么表单是怎样将数据提交到服务器的?服务器是怎样对表单数据进行处理的?下面我将为大家揭开表单提交背后的秘密
表单用<form></form> 标记定义,表单里面放置各种接受用户输入的控件
[html] view plaincopy
  1. <form id="login" name="login" method ="get"  action="Get.aspx">
  2. <p>用户名:<input id="txtUserName" name="txtUserName" type="text" /></p>  <!--用户名文本框-->
  3. <p>密 码:<input id="txtPWD" name="txtPWD" type="text" /></p>                     <!--密码文本框-->
  4. <p><input id="subLogin"  name ="subLogin" type="submit" value="提交" /></p><!--提交按钮-->
  5. </form>

首先我们来看一下表单form的一些属性
1、id:表单的唯一标识
2、name:表单的名字
3、method:定义表单提交的方法,有两种方法:Post方法和Get方法
4、action:用于处理表单的服务器端页面(以URL 形式表示)
表单中的控件有两个属性是非常重要的:name属性和value属性,每一个控件的这两个属性将构成“name-value对”提交到action属性所定义的页面进行处理
前边讲到表单提交有两种方法:post和get,那么这两种方法有什么区别呢?
1、post方法
用这种方法提交的表单,数据将以数据块的形式提交到服务器,表单数据不会出现在URL中,所以用这种方式提交的表单数据是安全的。如果表单数据中包含类似于密码等数据,建议使用post方法
用post方法提交数据的表单:
[html] view plaincopy
  1. <form id="login" name="login" method ="Post"  action="Post.aspx">
  2. <p>用户名:<input id="txtUserName" name="txtUserName" type="text" /></p>  <!--用户名文本框-->
  3. <p>密 码:<input id="txtPWD" name="txtPWD" type="text" /></p>                     <!--密码文本框-->
  4. <p><input id="subLogin"  name ="subLogin" type="submit" value="提交" /></p><!--提交按钮-->
  5. </form>

浏览器中效果

处理表单的Post.aspx页面代码
[csharp] view plaincopy
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. string strUserName = Request.Form["txtUserName"];
  4. string strPWD=Request .Form["txtPWD"];
  5. if (strUserName == "张三" && strPWD == "123456")
  6. {
  7. Response.Write(strUserName + "登录成功!");
  8. }
  9. else
  10. {
  11. Response.Redirect("Login.htm");
  12. }
  13. }

运行的结果

由以上代码可知,服务器端页面接收表单数据所用的方法是Request.Form["表单控件的name属性"],接收到数据后便可以进行处理,然后返回结果
2、Get方法
这是发送表单数据的默认方法,这种方法会以 “?name1=value1&name2=value2”的形式,将表单数据附加到URL的后面,提交到服务器处理,这种方法安全性当然不如post方法,因为表单数据会暴露在URL中,但是它的处理效率要比post方法高。如果表单中的数据没什么隐私数据,建议使用get方法,它的效率较高

用get方法提交数据的表单:
[html] view plaincopy
  1. <form id="login" name="login" method ="get"  action="Get.aspx">
  2. <p>用户名:<input id="txtUserName" name="txtUserName" type="text" /></p>  <!--用户名文本框-->
  3. <p>密 码:<input id="txtPWD" name="txtPWD" type="text" /></p>                     <!--密码文本框-->
  4. <p><input id="subLogin"  name ="subLogin" type="submit" value="提交" /></p><!--提交按钮-->
  5. </form>

处理表单的Get.aspx页面代码
[csharp] view plaincopy
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. string strUserName = Request.QueryString ["txtUserName"];
  4. string strPWD = Request.QueryString["txtPWD"];
  5. if (strUserName == "张三" && strPWD == "123456")
  6. {
  7. Response.Write(strUserName + "登录成功!");
  8. }
  9. else
  10. {
  11. Response.Redirect("Login.htm");
  12. }
  13. }

运行结果:

由以上代码可知,服务器端页面接收表单数据所用的方法是 Request.QueryString ["表单控件的name属性"],接收到数据后便可以进行处理,然后返回结果
那么我们在用VS编程的时候会发现,aspx页面的表单并没有指定action属性,那么它的 表单由哪个页面处理呢?aspx页面的表单默认是由本页面处理的,当然你也可以指定由其他aspx页面处理
在html中:name指的是用户名称,ID指的是用户注册是系统自动分配给用户的一个序列号。name是用来提交数据的,提供给表单用,可以重复;id则针对文档操作时候用,不能重复。如:document.getElementById();一、ID是在客户端脚本里用!NAME是用于获取提交表单的某表单域信息,在form里面,如果不指定Name的话,就不会发送到服务器端。二、以下元素input、select、form、frame、iframe用name,而以下元素table、tr、 td、div、p、span、h1、li用id,表单元素(form input textarea select)与框架元素(iframe frame)用 name,这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只接收有name的元素, 赋ID的元素通过表单是接收不到值的. 当然上述元素也可以赋ID值, 赋ID值的时候引用这些元素的方法就要变一下了. 赋 name: document.formName.inputName        document.frames("frameName") 赋 ID    : document.all.inputID                      document.all.frameID 只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID) body li a table tr td th p div span pre dl dt dd font b 等等举个简单的例子 <form name="form1"> 用户名:<input type=text name="username" id="username"> 密码:<input type=password name="password" id="pwd"> </form> 如果我要获得用户名和密码;JS用name获得的话,就得写成document.form1.username.value; document.form1.password.value; 用id获得: docuement.getElementById("username"); docuement.getElementById("pwd"); 有时候name 可能会出现相同的名字,所以这时候我们用name获得就无法确定获得的是哪个值了。 document.getElemntsByName("username"); 这里得到的是一个数组

document.getElementsByName(xxx); 取出的数组 document.getElementById(xxx); 取出是单个对象

还有需要注意的有些元素 比如 div 可以用 id名字直接得到对象 <div id="div1"></div> div1.innerHTML = "asdfasdf";而表单元素 就不可以这样了 只能用 document.getElementById(xx)

表单提交Post方法、Get方法相关推荐

  1. html form提交前验证,form表单提交前验证实现方法

    form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...

  2. jquery form表单提交成功,回调方法

    先下载 jquery-form.js [#assign security=JspTaglibs["http://www.springframework.org/security/tags&q ...

  3. 获取表单提交的数据getParameter()方法

    请求对象:request  public String getParameter(String name);  通过request的getParameter(String name)方法获取  表单里 ...

  4. base64上传为表单提交给后台的方法

    一个base64文件 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASUAAADkCAYAAADepDLSAAAgAElEQVR4Xuy9a ...

  5. php 表单提交文件大小,PHP如何通过表单直接提交大文件详解

    PHP如何通过表单直接提交大文件详解 前言 我想通过表单直接提交大文件,django 那边我就是这么干的.而对于 php 来说,我认为尽管可以设置最大上传的大小,但最大也无法超过内存大小,因为它无法把 ...

  6. html 提交form表单提交数据格式,form表单提交数据

    form表单提交的几种方法 HTML表单提交的几种方式方式一:通过submit按钮提交方式二:通过一般按钮button提交1/3javascript">functionsubmit1( ...

  7. 表单提交中get和post方式的区别

    表单提交中get和post方式的区别有5点  1.get是从服务器上获取数据,post是向服务器传送数据.  2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段 ...

  8. layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法

    layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法 参考文章: (1)layui表单提交使用form.on(' ...

  9. vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...

最新文章

  1. map/set/object/array对比
  2. 2021-01-27 计算机-进程与线程区别
  3. 手把手教你Python获取全部金融数据
  4. 基于javafx的五子棋_基于JavaFX的SimpleDateFormat演示程序
  5. 经典面试题(31):以下代码将输出的结果是什么?
  6. android系统优化(17)---高通平台性能优化概述
  7. Adwonder笔记
  8. 计算机c语言知识点txt,计算机二级C语言(重要知识点)
  9. qt 不允许 dllimport 静态数据成员 的定义_C++类和对象的定义
  10. [数据模型] 数据表三种关联的概述
  11. c语言三种结构化程序设计方法,C语言中用于结构化程序设计的三种基本结构是什么...
  12. 雅俗共赏——广告词之很美很强大的汉语言
  13. 现代人的困扰,“高刺激”的诱惑
  14. 2019年全国电子设计竞赛H题电磁炮之定点打击
  15. Gliffy, 在线Visio 杀手
  16. 智慧园区物联网平台架构
  17. php验证电话号码是否合法,js代码验证手机号码和电话号码是否合法_javascript技巧...
  18. 组织或项目外部影响因素分析
  19. 树莓派 FM 发送机小电台背后的原理解析
  20. 使用ArcGis测量矢量线长度

热门文章

  1. python基础之内置异常对象
  2. Python入门系列(1):如何使用Sublime text开发Python
  3. 平面单腿机器人跳跃控制研究——后续内容
  4. A站有一个页面需要PV统计 A站读写该数据 B站读该数据 需要数据同步
  5. JQuery版评分控件
  6. awk 里面添加单引号
  7. Unable to instantiate default tuplizer
  8. python之验证身份证号合法性的库:id_validator
  9. 诗与远方:无题(八)
  10. Python学习笔记之列表(五)