最通俗易懂、最接地气的讲解form表单的post提交和get提交的不同之处

最新推荐文章于 2024-04-24 09:27:42 发布

程宇寒

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量1.8k

点赞数 3

文章标签： form表单 get/post html 表单前端开发

本文链接：https://blog.csdn.net/czh500/article/details/108344185

版权

情况1：表单post提交,后台可以接收到action中的city参数

情况2.表单get提交,后台无法接收到action中的city参数

情况3.表单get提交,在form表单中添加相应的隐藏文本域

情况4.表单get提交,action中带的参数和form表单中的参数一样，后台获取参数时，到底获取的是哪个呢？

情况5.表单post提交,action中带的参数和form表单中的参数一样，后台获取参数时，到底获取的是哪个呢？

情况6.表单post提交,action中带多个同名的参数，后台获取参数时，到底获取的是第一个参数还是最后一个参数呢？

情况7.表单get提交,action中带的多个参数和表单中的多个参数同名，后台获取参数时，到底获取的是哪个参数呢？

情况8.用ajax方式提交数据到服务器

源代码如下：

form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交知识点</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" />
<link rel="stylesheet" type="text/css" href="../css/mark.css" />
<link rel="stylesheet" type="text/css" href="../css/input2.css" />
<link rel="stylesheet" type="text/css" href="../css/console.css" />
</head>
<body>
<h1>表单提交知识点</h1>
<h3>
1.get提交，action中的参数，服务端获取不到<br />
(比如action="/ajax/form?city=yudu"，服务端获取不到参数city的值)<br />
服务端只能获取到表单中的参数
</h3>
<h3>
2.post提交，action中的参数，服务端可以获取到<br />
(比如action="/ajax/form?city=yudu"，服务端可以获取到参数city的值)，<br />
与此同时，表单中的参数，服务端也可以获取到
</h3>
	
<h1>表单post提交,后台可以接收到action中的city参数</h1>
<h4>
用post提交的url显示如下:<br />
http://127.0.0.1:8888/ajax/form?city=yudu
<br />
也就是说post方式提交表单，参数分为两部分：一部分是action中的参数放在地址栏；
另一部分是表单中的参数放在请求的头中；所以所有的数据后台全部能获得。
</h4>
<form action="/ajax/form?city=yudu" method="post">
	姓名：<input type="text" name="userName" value="令狐冲" /><br />
	年龄：<input type="text" name="age" value="18" /><br />
	家乡：<input type="text" name="homeTown" value="江西省赣州市于都县" /><br />
	薪水：<input type="text" name="salary" value="18500" /><br />
	<input type="submit" name="submitButton" value="post方式提交到服务器(提交到Servlet)" />
	<br /><br />
</form>

<h1>表单get提交,后台无法接收到action中的city参数</h1>
<h4>
用get提交的url显示如下:<br />
http://127.0.0.1:8888/ajax/form?userName=韦小宝&age=16&homeTown=江西省于都县&salary=22500&submitButton=get方式提交到服务器%28提交到Servlet%29
<br />
也就是说method为get时action自己后边带的参数列表会被忽视，后台无法接收到action后边带的参数，后台只能得到表单中的参数。
</h4>
<form action="/ajax/form?city=yudu" method="get">
	姓名：<input type="text" name="userName" value="韦小宝" /><br />
	年龄：<input type="text" name="age" value="16" /><br />
	家乡：<input type="text" name="homeTown" value="江西省于都县" /><br />
	薪水：<input type="text" name="salary" value="22500" /><br />
	<input type="submit" name="submitButton" value="get方式提交到服务器(提交到Servlet)" />
	<br /><br />
</form>

<br /><br />
<h1>表单get提交,在form表单中添加相应的隐藏文本域</h1>
get请求方式的表单的action属性中不能附带任何参数，如果仍然想使用get请求方式，可
以在form表单中添加相应的隐藏文本域，例
如:<input name="city" type="hidden" value="jiangxi-ganzhou-yudu" />
<form action="/ajax/form?city=yudu" method="get">
	隐藏文本域(隐藏域)：<input type="hidden" name="city" value="jiangxi-ganzhou-yudu" />
	姓名：<input type="text" name="userName" value="张无忌" /><br />
	年龄：<input type="text" name="age" value="21" /><br />
	家乡：<input type="text" name="homeTown" value="于都县" /><br />
	薪水：<input type="text" name="salary" value="29320" /><br />
	<input type="submit" name="submitButton" value="get方式提交到服务器(提交到Servlet)" />
	<br /><br />
</form>

<h1>表单get提交,action中带的参数和form表单中的参数一样，后台获取参数时，到底获取的是哪个呢？</h1>
<h4>
当form表单提交方式为get的时候,
action中带的参数和form表单中的参数一样，后台获取参数时，获取的是form表单中的参数，而不是action中带的参数。
</h4>
<form action="/ajax/form?age=15&salary=16900" method="get">
年龄：<input type="text" name="age" value="21" /><br />
薪水：<input type="text" name="salary" value="28530" /><br />
<input type="submit" name="submitButton" value="get方式提交到服务器(提交到Servlet)" />
</form>

<h1>表单post提交,action中带的参数和form表单中的参数一样，后台获取参数时，到底获取的是哪个呢？</h1>
<h4>
当form表单提交方式为post的时候,
action中带的参数和form表单中的参数一样，后台获取参数时，获取的是action中带的参数，而不是form表单中的参数。
</h4>
<form action="/ajax/form?age=15&salary=16900" method="post">
年龄：<input type="text" name="age" value="21" /><br />
薪水：<input type="text" name="salary" value="28530" /><br />
<input type="submit" name="submitButton" value="post方式提交到服务器(提交到Servlet)" />
</form>

<h1>表单post提交,action中带多个同名的参数，后台获取参数时，到底获取的是第一个参数还是最后一个参数呢？</h1>
<h4>
表单post提交,action中带多个同名的参数，后台获取参数时，获取的是第一个参数.
</h4>
<form action="/ajax/form?age=15&age=19&age=25" method="post">
<input type="submit" name="submitButton" value="post方式提交到服务器(提交到Servlet)" />
</form>


<h1>表单get提交,action中带的多个参数和表单中的多个参数同名，后台获取参数时，到底获取的是哪个参数呢？</h1>
<h4>
表单get提交后,后台获取参数时，获取的是表单中的第一个参数(即后台获取到的age的值是14).
</h4>
<form action="/ajax/form?age=12&age=16&age=19" method="get">
年龄：<input type="text" name="age" value="14" /><br />
年龄：<input type="text" name="age" value="17" /><br />
<input type="submit" name="submitButton" value="get方式提交到服务器(提交到Servlet)" />
</form>

<h1>用ajax方式提交数据到服务器</h1>
<input type="button" value="ajax提交到服务器(提交到Servlet)" onclick="ajax();" />
<br /><br /><br />
	
</body>
<script type="text/javascript">
	
	function ajax(){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function() {
			if(this.readyState == 4 && this.status == 200){
				console.log(xhr.responseText);
			}
		}
		var url = '/ajax/form?city=jiangxi';
		//get提交，url地址栏上的参数，服务端可以获取到，但是send(data)发送的参数，服务端获取不到
		xhr.open('get', url, true);
		//post提交,url地址栏上的参数和send(data)发送的参数，服务端都可以获取到
// 		xhr.open('post', url, true);
		xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
		var data = 'userName=jerry&age=18&homeTown=ganzhou&salary=66';
		console.log("要提交的参数是："+ data);
		xhr.send(data);
	}
	
</script>
</html>

Form类

package com.jiongmeng.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 测试表单的get和post提交方式有什么不同
 */
@WebServlet("/form")
public class Form extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public static final String AJAX_POST_ENCODE = "UTF-8";

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		request.setCharacterEncoding(AJAX_POST_ENCODE);
		PrintWriter pw = response.getWriter();
		String city = request.getParameter("city");
		String userName = request.getParameter("userName");
		String age = request.getParameter("age");
		String homeTown = request.getParameter("homeTown");
		String salary = request.getParameter("salary");
		String submitButton = request.getParameter("submitButton");
		System.out.println("city=" + city);
		System.out.println("userName=" + userName);
		System.out.println("age=" + age);
		System.out.println("homeTown=" + homeTown);
		System.out.println("salary=" + salary);
		System.out.println("submitButton=" + submitButton);
		pw.print("city="+city+";userName="+userName + ";age="+age+";homeTown="+homeTown+";salary="+salary+";submitButton="+submitButton+";");
		pw.flush();
		pw.close();
	}

	@Override
	public void init(ServletConfig config) throws ServletException {

	}

}

完！