表單中多個請求引數名字相同，伺服器到底獲取的是哪個請求引數的值，表單的action和get和post提交方式的關係以及提交資料的不同點

阿新 • • 發佈：2019-01-14

直接看程式碼和截圖吧，程式碼中有註釋，還有文字說明！

表單get提交和post提交，一個很大的不同點大家都應該知道，post提交，瀏覽器位址列中不會明文顯示，而get提交，瀏覽器位址列中會明文顯示，這不是我們今天討論的重點!

今天討論的重點如下:

1.表單中如果有2個控制元件的name屬性的值相同，伺服器端獲取請求引數的時候，獲取到的是前面的那個請求引數(不信的話，可以用get方式提交表單，在瀏覽器位址列看下這2個名字相同的請求引數哪個在前，伺服器端拿到的就是前面的那個請求引數)

2.表單的action中帶了請求引數的話，post方式會提交action中的請求引數，get方式不會提交action中的請求引數

3.當表單的action中帶的請求引數名稱和表單中的控制元件的name屬性的值一樣時，如果是post提交表單的話，伺服器端獲取到的是action中帶的請求引數，如果是get提交表單的話，那麼伺服器端獲取到的是表單中的控制元件(原因參考第2點，表單的action中帶了請求引數的話，post會提交action中的請求引數，get不會提交action中的請求引數，所以如果是get提交表單的話，伺服器端自然是獲取到的是表單中的控制元件中的值)

testForm.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>測試表單的action的get和post方式提交資料的不同，以及測試多個請求引數同名，伺服器到底獲取的是哪個請求引數的值</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/body.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/mark.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/input2.css">
</head>
<body onload="showFormInfo()">
	<center>
		<h2>
			<font color="red">測試表單的action的get和post方式提交資料的不同，以及測試多個請求引數同名，伺服器到底獲取的是哪個請求引數的值</font>
		</h2>
		<div style="height: 90px;" class="testDiv3" id="showFormInfo"></div><br>
		<form id="testForm" action="${pageContext.request.contextPath}/TestForm?onlineName=jerry&workCity=beijing&money=19999&money=36888" method="post">
			使用者名稱:<input type="text" name="userName" value="令狐沖">
			<br> 年齡:<input type="text" name="age" value="23">
			<br> 工作城市:<input type="text" name="workCity" value="深圳">
			<br> 老家城市:<input type="text" name="hometown" value="江西省贛州市於都縣">
			<br> 薪水:<input type="text" name="money" value="28500">
			<br>
			員工編號2:<input type="text" name="employeeNumber" value="6688"><br>
			員工編號:<input type="text" name="employeeNumber" value="9527"><br>
			<br> <input type="submit" value="submit按鈕提交到伺服器端"> <input id="postToServerButton"
				type="button" onclick="postToServer()"> <input id="getToServerButton" type="button" onclick="getToServer()"><br><br> <input type="reset"
				value="(重置按鈕)本質不是清空控制元件中的值，而是還原控制元件中的值">
		</form>
	</center>
</body>
<script type="text/javascript">
	
	//顯示錶單的資訊
	function showFormInfo() {
		var formNode = document.getElementById("testForm");
		var message1 = "表單的action=";
		var message2 = "表單的method提交方式=";
		document.getElementById("showFormInfo").innerHTML = message1
				+ formNode.action + "<br>" + message2 + formNode.method;
		var postButton = document.getElementById("postToServerButton");
		postButton.value = "普通按鈕" + "post" + "提交至伺服器" + formNode.action;
		var getButton = document.getElementById("getToServerButton");
		getButton.value = "普通按鈕" + "get" + "提交至伺服器" + formNode.action;
	}
	
	/*
		表單post方式提交到伺服器端
	*/
	function postToServer(){
		var formNode = document.getElementById("testForm");
		formNode.method = "post";
		formNode.submit();
	}
	
	/*
		表單get方式提交到伺服器端
	*/
	function getToServer(){
		var formNode = document.getElementById("testForm");
		formNode.method = "get";
		formNode.submit();
	}
	
</script>
</html>

TestForm.java

package com.jiongmeng.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 * 測試表單的action的get和post方式提交資料的不同，以及測試多個請求參
 * 數同名，伺服器到底獲取的是哪個請求引數的值
 * 
 */
@WebServlet("/TestForm")
public class TestForm extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//使用者名稱
		String userName = request.getParameter("userName");
		//網名
		String onlineName = request.getParameter("onlineName");
		//年齡
		String age = request.getParameter("age");
		//工作城市
		String workCity = request.getParameter("workCity");
		//老家城市
		String hometown = request.getParameter("hometown");
		//薪水
		String money = request.getParameter("money");
		//員工編號
		String employeeNumber = request.getParameter("employeeNumber");
		System.out.println("使用者名稱=" + userName + "網名=" + onlineName + "年齡=" + age + "工作城市=" + workCity + "家鄉=" + hometown + "薪水=" + money + "員工編號=" + employeeNumber);
		request.getRequestDispatcher("/jsp/form/showFormData.jsp").forward(request, response);
	
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//解決中文亂碼的問題(我們這個專案中的web.xml配置了中文亂碼的過濾器處理中文亂碼的問題)
		//2個注意 (1.只對post有效，所以該行程式碼放在doGet方法中沒有任何意義 2.必須在request.getParameter()前設定，否則還是會亂碼，所以為了保險起見，以後就把該行程式碼放在第一行)
		//request.setCharacterEncoding("utf-8");
		System.out.println("*******************我是TestForm類中的doPost方法*******************");
		doGet(request, response);
	}

}

showFormData.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>測試表單的action的get和post方式提交資料的不同，以及測試多個請求引數同名，伺服器到底獲取的是哪個請求引數的值</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/body.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/mark.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/input2.css">
</head>
<body>
	<center>
		<h2>
			<font color="red">測試表單的action的get和post方式提交資料的不同，以及測試多個請求引數同名，伺服器到底獲取的是哪個請求引數的值</font>
		</h2>
		<h2>顯示從testForm.jsp頁面中的表單中提交過來的資料</h2>
		使用者名稱:<font color="red">${param.userName}</font><br>
		網名:<font color="red">${param.onlineName}</font><br>
		年齡:<font color="red">${param.age}</font><br>
		工作城市:<font color="red">${param.workCity}</font><br>
		老家城市:<font color="red">${param.hometown}</font><br>
		薪水:<font color="red">${param.money}</font><br>
		員工編號:<font color="red">${param.employeeNumber}</font><br>
		<br>
		<br>
		<br>
		<div class="testDiv2" style="width: 100%;">
		<h3>
		<font color="blue">
		表單get提交和post提交，一個很大的不同點大家都應該知道，post提交，瀏覽器位址列中不會明文顯示，而get提交，瀏覽器位址列中會明文顯示，這不
		是我們今天討論的重點!
		</font>
		</h3>
		<h3><font color="red">今天討論的重點如下:</font></h3>
		<font color="#A52A2A">
		1.表單中如果有2個控制元件的name相同，伺服器端獲取請求引數的時候，獲取到的是前面的那個請求引數(不信的話，可
		以用get方式提交表單，在瀏覽器位址列看下這2個名字相同的請求引數哪個在前，伺服器端拿到的就是前面的那個請求引數)<br>
		</font>
		2.表單的action中帶了請求引數的話，post會提交action中的請求引數，get不會提交action中的請求引數<br>
		<font color="#000000">
		3.當表單的action中帶的請求引數名稱和表單中的控制元件的name屬性的值一樣時，如果是post提交表單的話，服
		務器端獲取到的是action中帶的請求引數，如果是get提交表單的話，那麼伺服器端獲取到的是表單中的控制元件(原因參考第2點，表
		單的action中帶了請求引數的話，post會提交action中的請求引數，get不會提交action中的請求引數，所以如果是get提
		交表單的話，伺服器端自然是獲取到的是表單中的控制元件中的值)<br>
		</font>
		</div>
	</center>
</body>
</html>

表單中多個請求引數名字相同，伺服器到底獲取的是哪個請求引數的值，表單的action和get和post提交方式的關係以及提交資料的不同點

表單中多個請求引數名字相同，伺服器到底獲取的是哪個請求引數的值，表單的action和get和post提交方式的關係以及提交資料的不同點

form表單中多個button按鈕必須聲明type類型

一個表單中多個按鈕實現不同功能

list中多個map的key相同的value相加

tomcat中多個專案（web專案）共用log4j.jar的情況下，如何讓其各自列印各自的日誌檔案。及輸出同級別日誌資訊

hql語句一次比對查詢單表中多個字段

element UI 中 el-form 表單包含多個 el-input 時的校驗方法

struts2中，一個Form表單配置多個action實現原理及案例

OGG進程拆分（單表拆成多個進程）

git配置中出現多個重復名字:More than one value for the key user.name

Form表單傳遞多個值傳遞List陣列物件的解決方法之一

Java中不使用陣列時，傳入多個可變引數

表中多個按鈕進行操作不需要跳轉頁面的實現

android中Webview設定多個cookie引數

PrepareStatement sql語句in中多個引數的實現

表中多個語句的刪除（多個欄位）

spring mvc的controller識別同一個form表單的多個submit按鈕問題以及相關處理

Hibernate中多對多的annotation的寫法（中間表可以有多個欄位）

IOS中多個網路請求問題

SqlServer查詢同一張表中多個欄位相同的記錄

表單中多個請求引數名字相同，伺服器到底獲取的是哪個請求引數的值，表單的action和get和post提交方式的關係以及提交資料的不同點

相關推薦