当用户在 HTML 表单 (HTML Form) 中输入信息并提交之后,有两种方法将信息从浏览器传送到 Web 服务器 (Web Server)。

一种方法是通过 URL,另外一种是在 HTTP Request 的 body 中。

前一种方法,我们使用 HTML Form 中的 method = "get",后一种方法我们使用 HTML Form 中的 method ="post"

例句如下:

<form action = "..." method = "get">
<from action = "..." method = "post">

通过 get 或者 post 方法都可以获得 Form 的数据,两者主要区别在于以下几方面:

Get

  • URL 改变,在URL 里显示 HTML Form 参数的 name/value 值。
  • 只适合有少量参数的 HTML Form,因为 URL 长度有字符限制,不能无限长。
  • 涉及安全性的信息,比如用户密码,不能用 get,因为会在 URL 上显示,不安全。

Post

  • URL 不改变,不在 URL 里显示 HTML Form 的数据。
  • Form 提交的信息没有长度限制。
  • 涉及安全性的信息,如用户密码,应采用 post 方式。

我们看看 get 是如何提交 Form 数据的。我们先写一个 HTML 文件,如下:

<html>
<head><title>Blablar.com HTML Form Method Get Example</title></head>
<body>
<form action ="get.php" method ="get">
Name: <input type="text" name="username" />
<input type ="submit" value="ok" />
</form>
</body>
</html>

该 HTML 的显示界面如下:

当你在这个 HTML 文件的表单文本框输入框里输入姓名,比如 "Jacky",然后鼠标点击ok 按钮,会跳转到 get.php,在 get.php 里会显示如下图。

你可以看到在浏览器地址栏里的URL是:

http://localhost:8080/get.php?username=Jacky

注意get.php后面的字符串 ?username=Jacky,这是一对 name/value 数据,前面加一个问号。

如果你将 form 改成 method = "post",你在浏览器地址栏就看不到这对 name/value 数据,而只有:

http://localhost:8080/get.php

使用 get 时,第一对 name/value 值前要加一个问号? ,以后每对 name/value 值则要用 & 分开。比如一个 form中有三个参数,如下:

<form action ="u.php" method ="get">
Name: <input type="text" name="username" />
Age: <input type="text" name="age" />
Gender: <input type="text" name="gender" />
<input type ="submit" value="ok" />
</form>

比如你在Name 项填写Jacky,Age项填写50,Gender项填了male,提交之后的 URL 显示为:

http://localhost:8080/get.php?username=Jacky&age=50&gender=male

html表单中get与post之间的区别的更多相关文章

  1. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  2. Form表单中的get和post的区别

    method="get/post",两种方式的区别 Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法.二者主要区别如下: 1.Get将表单中数据的按 ...

  3. form表单中method的get和post区别

    一.问题的提出   <form action="getPostServlet/getPost.do?param4=param4" method="get" ...

  4. servlet表单中get和post方法的区别

    Form中的get和post方法,在数据传输过程中分别对应了HTTP协议中的GET和POST方法.二者主要区别如下: 1.Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据. 2.Ge ...

  5. Form表单中Post与Get方法的区别

    Form提供了两种数据传输的方式:get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响. Form中的get和post方法,在数据传输过程中分别 ...

  6. 表单中input name属性有无[]的区别

    1 input数组 如下一个表单: <input type="text" name="username[]" value="Jason" ...

  7. 表单中submit和button按钮的区别!

    对于表单的按钮以前知道submit和button有区别,但没有深入探索,今天刚好又碰到这个问题,看了下网络上这位朋友已经有现成的总结了,而且比较到位,拿来跟大家分享下(原文地址:http://blog ...

  8. form表单中id与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  9. Form表单中method为get和post的区别

    序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...

随机推荐

  1. Java-Runoob-高级教程-实例-方法:04. Java 实例 – 斐波那契数列

    ylbtech-Java-Runoob-高级教程-实例-方法:04. Java 实例 – 斐波那契数列 1.返回顶部 1. Java 实例 - 斐波那契数列  Java 实例 斐波那契数列指的是这样一 ...

  2. Jmeter(二十四)Jmeter-Question之“加密请求参数”

    日常接口测试碰到参数加密的情况不在少数,当然与之相对的也有解密.直接记录实例: 排除各家用的不一样的加密方式,用的最多的还是MD5加密(16,32).Jmeter3.2版本已经有解决方案 1.${__ ...

  3. Jmeter(二十二)Jmeter-Question之“不同线程组之间传递变量”

    Jmeter中增添原件是以线程组为‘基本单位’的,贴张图,显而易见: 测试计划节点下的内容 线程组节点下的内容 因此,变量只能在当前的线程组下进行传递.做个小Demo,立即试试: 测试结论:不同线程组 ...

  4. js时间加减

    1.选择上一周方法(不算当天) $("#weekSel").click(function () { //当前时间 var now = new Date(); //当前时间往前推一周 ...

  5. (转)深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的

    原文地址:http://www.cnblogs.com/Music/p/mini-mvc.html (含代码) ASP.NET MVC是如何运行的[1]: 建立在“伪”MVC框架上的Web应用 地址: ...

  6. nodejs使用案例-mysql操作

    1.package.json: { "scripts": { "start": "node app.js" }, "devDepe ...

  7. 06 I/O重定向与管道符

    首先,我们知道我们的计算机结构,在第一节的时候已经介绍过了,CPU进行数据运算,同时控制器负责指令的发送,而内存则是数据存储的地方,CPU读取的数据均从内存中调取.电脑除了CPU和内存外,我们还有I/ ...

  8. 使用Solrj 获取语句分词结果的代码

    import java.util.ArrayList; import java.util.Iterator; import java.util.List; import org.apache.log4 ...

  9. 初级安全入门——XSS注入的原理与利用

    XSS的简单介绍 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets,CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者 ...

  10. html里面,没有内容,要高度占满页面

    html { height:100%; margin:0; } body{ width: 100%; height: 100%; background-color: rgb(52,175,245); ...