Nodejs系列課程（七）-如何提交表單并接收參數？

果要做一個網站應用，不可避免的會遇到表單的提交及獲取參數的值，下面我們來看看用node.js + express怎么做

先來構建一個表單簡單模擬登錄GET方式提交數據

1.打開subform.ejs文件，修改文件代碼為如下：

      <%= title %>                   <% include nav %>                      用戶名：          密碼：

2.打開subform.js我們試著接收參數值并輸出到控制臺

var express = require('express');var router = express.Router();router.get('/', function(req, res) {  var   userName = req.query.txtUserName,  userPwd = req.query.txtUserPwd,  userName2 = req.param('txtUserName'),  userPwd2 = req.param('txtUserPwd');  console.log('req.query用戶名:'+userName);  console.log('req.query密碼:'+userPwd);  console.log('req.param用戶名:'+userName2);  console.log('req.param密碼:'+userPwd2);  res.render('subform', { title: '提交表單及接收參數示例' });});module.exports = router;subform.js get方式源碼

3.運行，并提交表單在瀏覽器中運行：http://localhost:3000/subform，輸入表單項并提交，可以發現url發生了變化

我們再看看控制臺的輸出

我們完成了GET方式提交表單并接收到了值，不錯_!（稍后在后面再去講得到值的方式和區別）

再來在上面的代碼基礎上去修改一下表單的method簡單模擬登錄POST方式提交數據

1.首先修改一下subform.ejs文件中的form標簽，修改為如下：

...

2.再在subform.js中添加代碼，接收post提交、接收參數并輸出到控制臺

...router.post('/',function(req, res){  var   userName = req.body.txtUserName,  userPwd = req.body.txtUserPwd,  userName2 = req.param('txtUserName'),  userPwd2 = req.param('txtUserPwd');  console.log('req.body用戶名:'+userName);  console.log('req.body密碼:'+userPwd);  console.log('req.param用戶名:'+userName2);  console.log('req.param密碼:'+userPwd2);　res.render('subform', { title: '提交表單及接收參數示例' });});...

3.運行，并提交表單在瀏覽器中運行：http://localhost:3000/subform，輸入表單項并提交，可以發現url不會發生變化

我們再看看控制臺的輸出

再回過頭看看GET和POST方式接收值，從直接效果上來看

req.query：我用來接收GET方式提交參數

req.body：我用來接收POST提交的參數

req.params：兩種都能接收到大家自行看看Express的Request部分的API:http://expressjs.com/en/api.html#req.params

這里著重解釋一下req.body，Express處理這個post請求是通過中間件bodyParser，你可以看到app.js中有一塊代碼

...var bodyParser = require('body-parser');...app.use(bodyParser.json());app.use(bodyParser.urlencoded());...

沒有這個中間件Express就不知道怎么處理這個請求，通過bodyParser中間件分析 application/x-www-form-urlencoded和application/json請求，并把變量存入req.body，這種我們才能夠獲取到！

什么

BOM (Browser Object Model)，瀏覽器對象模型，提供了獨立于內容與瀏覽器窗口進行交互的對象

其作用就是跟瀏覽器做一些交互效果,比如如何進行頁面的后退，前進，刷新，瀏覽器的窗口發生變化，滾動條的滾動，以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率

瀏覽器的全部內容可以看成DOM，整個瀏覽器可以看成BOM。區別如下：

訪問客戶端對象

使用 window 對象可以訪問客戶端其他對象，這種關系構成瀏覽器對象模型，window 對象代表根節點，瀏覽器對象關系的關系如圖所示，每個對象說明如下。

window：客戶端 JavaScript 頂層對象。每當 <body> 或 <frameset> 標簽出現時，window 對象就會被自動創建。
navigator：包含客戶端有關瀏覽器信息。
screen：包含客戶端屏幕的信息。
history：包含瀏覽器窗口訪問過的 URL 信息。
location：包含當前網頁文檔的 URL 信息。
document：包含整個 HTML 文檔，可被用來訪問文檔內容及其所有頁面元素。

當然我們可以吧window下的所有子對象看成他的他的屬性，只不過屬性也是一個對象而已。其實window也有很多常用的方法：

window

Bom的核心對象是window，它表示瀏覽器的一個實例

在瀏覽器中，window對象有雙重角色，即是瀏覽器窗口的一個接口，又是全局對象

因此所有在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法

var name = 'js每日一題';
function lookName(){
  alert(this.name);
}

console.log(window.name);  //js每日一題
lookName();                //js每日一題
window.lookName();         //js每日一題

關于窗口控制方法如下：

moveBy(x,y)：從當前位置水平移動窗體x個像素，垂直移動窗體y個像素，x為負數，將向左移動窗體，y為負數，將向上移動窗體
moveTo(x,y)：移動窗體左上角到相對于屏幕左上角的(x,y)點
resizeBy(w,h)：相對窗體當前的大小，寬度調整w個像素，高度調整h個像素。如果參數為負值，將縮小窗體，反之擴大窗體
resizeTo(w,h)：把窗體寬度調整為w個像素，高度調整為h個像素
scrollTo(x,y)：如果有滾動條，將橫向滾動條移動到相對于窗體寬度為x個像素的位置，將縱向滾動條移動到相對于窗體高度為y個像素的位置
scrollBy(x,y)：如果有滾動條，將橫向滾動條向左移動x個像素，將縱向滾動條向下移動y個像素

window.open() 既可以導航到一個特定的url，也可以打開一個新的瀏覽器窗口

如果 window.open() 傳遞了第二個參數，且該參數是已有窗口或者框架的名稱，那么就會在目標窗口加載第一個參數指定的URL

window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>

window.open() 會返回新窗口的引用，也就是新窗口的 window 對象

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() 僅用于通過 window.open() 打開的窗口

新創建的 window 對象有一個 opener 屬性，該屬性指向打開他的原始窗口對象

Window 子對象

Window的子對象主要有如下幾個：

JavaScript document 對象
JavaScript frames 對象
JavaScript history 對象
JavaScript location 對象
JavaScript navigator 對象
JavaScript screen 對象

打開和關閉窗口

使用 window 對象的 open() 方法可以打開一個新窗口。用法如下：

window.open (URL, name, features, replace)

參數列表如下：

URL：可選字符串，聲明在新窗口中顯示網頁文檔的 URL。如果省略，或者為空，則新窗口就不會顯示任何文檔。
name：可選字符串，聲明新窗口的名稱。這個名稱可以用作標記 <a> 和 <form> 的 target 目標值。如果該參數指定了一個已經存在的窗口，那么 open() 方法就不再創建一個新窗口，而只是返回對指定窗口的引用，在這種情況下，features 參數將被忽略。
features：可選字符串，聲明了新窗口要顯示的標準瀏覽器的特征，具體說明如下表所示。如果省略該參數，新窗口將具有所有標準特征。
replace：可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目。

該方法返回值為新創建的 window 對象，使用它可以引用新創建的窗口。

新創建的 window 對象擁有一個 opener 屬性，引用打開它的原始對象。opener 只在彈出窗口的最外層 window 對象（top）中定義，而且指向調用 window.open() 方法的窗口或框架。

示例1

下面示例演示了打開的窗口與原窗口之間的關系。

win = window.open();  //打開新的空白窗口win.document.write ("<h1>這是新打開的窗口</h1>");  //在新窗口中輸出提示信息win.focus ();  //讓原窗口獲取焦點win.opener.document.write ("<h1>這是原來窗口</h1>");  //在原窗口中輸出提示信息console.log(win.opener == window);  //檢測window.opener屬性值

使用 window 的 close() 方法可以關閉一個窗口。例如，關閉一個新創建的 win 窗口可以使用下面的方法實現。

win.close;

如果在打開窗口內部關閉自身窗口，則應該使用下面的方法。

純文本復制

window.close;

使用 window.closed 屬性可以檢測當前窗口是否關閉，如果關閉則返回 true，否則返回 false。

示例2

下面示例演示如何自動彈出一個窗口，然后設置半秒鐘之后自動關閉該窗口，同時允許用戶單擊頁面超鏈接，更換彈出窗口內顯示的網頁 URL。

var url = "c.biancheng.net";  //要打開的網頁地址var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,    scrollbars=no,resizable=no, location=no, status=no";  //設置新窗口的特性//動態生成一個超鏈接document.write('<a href="c.biancheng.net" target="newW">切換到C語言中文網首頁</a>');var me = window.open(url, "newW", featrues);  //打開新窗口setTimeout (function () {  //定時器    if (me.closed) {        console.log("創建的窗口已經關閉。");    } else {        me.close();    }}, 5000);  //半秒鐘之后關閉該窗口

location

url地址如下：

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

location屬性描述如下：

屬性名	例子	說明
hash	"#contents"	utl中#后面的字符，沒有則返回空串
host	www.wrox.com:80	服務器名稱和端口號
hostname	www.wrox.com	域名，不帶端口號
href	http://www.wrox.com:80/WileyCDA/?q=javascript#contents	完整url
pathname	"/WileyCDA/"	服務器下面的文件路徑
port	80	url的端口號，沒有則為空
protocol	http:	使用的協議
search	?q=javascript	url的查詢字符串，通常為？后面的內容

除了 hash之外，只要修改location的一個屬性，就會導致頁面重新加載新URL

location.reload()，此方法可以重新刷新當前頁面。這個方法會根據最有效的方式刷新頁面，如果頁面自上一次請求以來沒有改變過，頁面就會從瀏覽器緩存中重新加載

如果要強制從服務器中重新加載，傳遞一個參數true即可

window.name屬性

window.name屬性用于設置當前瀏覽器窗口的名字。它有一個特點，就是瀏覽器刷新后，該屬性保持不變。所以，可以把值存放在該屬性內，然后跨頁面、甚至跨域名使用。當然，這個值有可能被其他網站的頁面改寫。

window.name = "Hello World!";
console.log(window.name);

各個瀏覽器對這個值的儲存容量有所不同，但是一般來說，可以高達幾MB。

該屬性只能保存字符串，且當瀏覽器窗口關閉后，所保存的值就會消失。因此局限性比較大，但是與iFrame窗口通信時，非常有用。

window.innerHeight屬性，window.innerWidth屬性

這兩個屬性返回網頁的CSS布局占據的瀏覽器窗口的高度和寬度，單位為像素。很顯然，當用戶放大網頁的時候（比如將網頁從100%的大小放大為200%），這兩個屬性會變小。

注意，這兩個屬性值包括滾動條的高度和寬度。

window.pageXOffset屬性，window.pageYOffset屬性

window.pageXOffset屬性返回頁面的水平滾動距離，window.pageYOffset屬性返回頁面的垂直滾動距離。這兩個屬性的單位為像素。

iframe元素

window.frames返回一個類似數組的對象，成員為頁面內的所有框架，包括frame元素和iframe元素。需要注意的是，window.frames的每個成員對應的是框架內的窗口（即框架的window對象），獲取每個框架的DOM樹，需要使用window.frames[0].document。

var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;

上面代碼用于獲取框架頁面的標題。

iframe元素遵守同源政策，只有當父頁面與框架頁面來自同一個域名，兩者之間才可以用腳本通信，否則只有使用window.postMessage方法。

在iframe框架內部，使用window.parent指向父頁面。

window.self，window.window

window.self和window.window屬性都指向窗口本身。這兩個屬性只讀。

window.self === window // true
window.window === window // true

window.frames，window.length

window.frames屬性返回一個類似數組的對象，成員為頁面內所有框架窗口，包括frame元素和iframe元素。window.frames[0]表示頁面中第一個框架窗口。

如果iframe元素設置了id或name屬性，那么就可以用屬性值，引用這個iframe窗口。比如<iframe name="myIFrame">可以用frames['myIFrame']或者frames.myIFrame來引用。

frames屬性實際上是window對象的別名。

frames === window // true

因此，frames[0]也可以用window[0]表示。但是，從語義上看，frames更清晰，而且考慮到window還是全局對象，因此推薦表示多窗口時，總是使用frames[0]的寫法。

window.length屬性返回當前網頁包含的框架總數。如果當前網頁不包含frame和iframe元素，那么window.length就返回0。

window.frames.length === window.length // true

上面代碼表示，window.frames.length與window.length應該是相等的。

window.frameElement

window.frameElement屬性主要用于當前窗口嵌在另一個網頁的情況（嵌入<object>、<iframe>或<embed>元素），返回當前窗口所在的那個元素節點。如果當前窗口是頂層窗口，或者所嵌入的那個網頁不是同源的，該屬性返回null。

// HTML 代碼如下
// <iframe src="about.html"></iframe>

// 下面的腳本在 about.html 里面
var frameEl = window.frameElement;
if (frameEl) {
  frameEl.src = 'other.html';
}

上面代碼中，frameEl變量就是<iframe>元素。

window.top，window.parent

window.top屬性指向最頂層窗口，主要用于在框架窗口（frame）里面獲取頂層窗口。

window.parent屬性指向父窗口。如果當前窗口沒有父窗口，window.parent指向自身。

if (window.parent !== window.top) {
  // 表明當前窗口嵌入不止一層
}

對于不包含框架的網頁，這兩個屬性等同于window對象。

window.status

window.status屬性用于讀寫瀏覽器狀態欄的文本。但是，現在很多瀏覽器都不允許改寫狀態欄文本，所以使用這個方法不一定有效。

window.devicePixelRatio

window.devicePixelRatio屬性返回一個數值，表示一個 CSS 像素的大小與一個物理像素的大小之間的比率。也就是說，它表示一個 CSS 像素由多少個物理像素組成。它可以用于判斷用戶的顯示環境，如果這個比率較大，就表示用戶正在使用高清屏幕，因此可以顯示較大像素的圖片。

navigator

navigator 對象主要用來獲取瀏覽器的屬性，區分瀏覽器類型。屬性較多，且兼容性比較復雜

下表列出了navigator對象接口定義的屬性和方法：

Navigator.userAgent屬性

Navigator.userAgent屬性返回瀏覽器的User-Agent字符串，用來標示瀏覽器的種類。下面是Chrome瀏覽器的User-Agent。

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

通過userAgent屬性識別瀏覽器，不是一個好辦法。因為必須考慮所有的情況（不同的瀏覽器，不同的版本），非常麻煩，而且無法保證未來的適用性，更何況各種上網設備層出不窮，難以窮盡。所以，現在一般不再識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當前瀏覽器是否支持要用到的JavaScript功能。

不過，通過userAgent可以大致準確地識別手機瀏覽器，方法就是測試是否包含“mobi”字符串。

var ua = navigator.userAgent.toLowerCase();
if (/mobi/i.test(ua)) {
// 手機瀏覽器
} else {
// 非手機瀏覽器
}

如果想要識別所有移動設備的瀏覽器，可以測試更多的特征字符串。

/mobi|android|touch|mini/i.test(ua)

navigator.plugins屬性

navigator.plugins屬性返回一個類似數組的對象，成員是瀏覽器安裝的插件，比如Flash、ActiveX等。

screen

保存的純粹是客戶端能力信息，也就是瀏覽器窗口外面的客戶端顯示器的信息，比如像素寬度和像素高度

一般使用以上兩個屬性，了解設備的分辨率。上面代碼顯示，某設備的分辨率是1920x1080。

除非調整顯示器的分辨率，否則這兩個值可以看作常量，不會發生變化。顯示器的分辨率與瀏覽器設置無關，縮放網頁并不會改變分辨率。

下面是根據屏幕分辨率，將用戶導向不同網頁的代碼。

if ((screen.width<=800) && (screen.height<=600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');
}

history

history對象主要用來操作瀏覽器URL的歷史記錄，可以通過參數向前，向后，或者向指定URL跳轉

常用的屬性如下：

history.go()

接收一個整數數字或者字符串參數：向最近的一個記錄中包含指定字符串的頁面跳轉，

history.go('maixaofei.com')

當參數為整數數字的時候，正數表示向前跳轉指定的頁面，負數為向后跳轉指定的頁面

history.go(3) //向前跳轉三個記錄
history.go(-1) //向后跳轉一個記錄

history.forward()：向前跳轉一個頁面
history.back()：向后跳轉一個頁面
history.length：獲取歷史記錄數

URL的編碼/解碼方法

JavaScript提供四個URL的編碼/解碼方法。

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()

window.getComputedStyle方法

getComputedStyle方法接受一個HTML元素作為參數，返回一個包含該HTML元素的最終樣式信息的對象。

window.matchMedia方法

window.matchMedia方法用來檢查CSS的mediaQuery語句。

alert()，prompt()，confirm()

alert()、prompt()、confirm()都是瀏覽器用來與用戶互動的方法。它們會彈出不同的對話框，要求用戶做出回應。

需要注意的是，alert()、prompt()、confirm()這三個方法彈出的對話框，都是瀏覽器統一規定的式樣，是無法定制的。

alert方法彈出的對話框，只有一個“確定”按鈕，往往用來通知用戶某些信息。

// 格式
alert(message);

// 實例
alert("Hello World");

用戶只有點擊“確定”按鈕，對話框才會消失。在對話框彈出期間，瀏覽器窗口處于凍結狀態，如果不點“確定”按鈕，用戶什么也干不了。

prompt方法彈出的對話框，在提示文字的下方，還有一個輸入框，要求用戶輸入信息，并有“確定”和“取消”兩個按鈕。它往往用來獲取用戶輸入的數據。

// 格式
var result = prompt(text[, default]);

// 實例
var result = prompt('您的年齡？', 25)

上面代碼會跳出一個對話框，文字提示為“您的年齡？”，要求用戶在對話框中輸入自己的年齡（默認顯示25）。

prompt方法的返回值是一個字符串（有可能為空）或者null，具體分成三種情況：

用戶輸入信息，并點擊“確定”，則用戶輸入的信息就是返回值。

用戶沒有輸入信息，直接點擊“確定”，則輸入框的默認值就是返回值。

用戶點擊了“取消”（或者按了Escape按鈕），則返回值是null。

prompt方法的第二個參數是可選的，但是如果不提供的話，IE瀏覽器會在輸入框中顯示undefined，Chrome會返回空字符串""。因此，最好總是提供第二個參數，作為輸入框的默認值。

confirm方法彈出的對話框，除了提示信息之外，只有“確定”和“取消”兩個按鈕，往往用來征詢用戶的意見。

// 格式
var result = confirm(message);

// 實例
var result = confirm("你最近好嗎？");

上面代碼彈出一個對話框，上面只有一行文字“你最近好嗎？”，用戶選擇點擊“確定”或“取消”。

confirm方法返回一個布爾值，如果用戶點擊“確定”，則返回true；如果用戶點擊“取消”，則返回false。

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎

、背景

最近在做一些東西的時候，遇到一個需要Springmvc后臺接收list類型數據的需求，幾經輾轉才完美解決了這個問題，今天記下來方便以后使用，也分享給需要的小伙伴們~

二、實現方式

實現方式一

前端頁面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2 pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>測試</title>
 8 </head>
 9 <body>
10 <input type="button" name="request" value="請求后臺" style="width:200px;height:50px;background-color:red;margin-bottom:20px;">
11 <div name="rs"></div>
12 <input type="checkbox" name="se" value="1">hafiz.zhang<br/>
13 <input type="checkbox" name="se" value="2">jack.chen<br/>
14 <input type="checkbox" name="se" value="3">lili.wang<br/>
15 <script type="text/javascript">
16 
17 $("input[name='request']").click(function(){
18 var data = [];
19 $("input[name='se']").each(function(){
20 if($(this).prop("checked")) {
21 data.push($(this).val());
22 }
23 });
24 var json_data = JSON.stringify(data);
25 $.ajax({
26 type:"post",
27 url:$.wap.url + "/test/index",
28 contentType:"application/json",
29 data:json_data ,
30 dataType:"json",
31 success:function(data){
32 var str="";
33 for(var i = 0; i < data.length; i++) {
34 str += ";name=" + data[i];
35 }
36 $("div[name='rs']").html(str);
37 },
38 error:function(){
39 alert("出錯啦");
40 }
41 });
42 }); 
43 </script>
44 </body>
45 </html>

后臺接收

 1 package com.hafiz.www.controller;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import org.springframework.stereotype.Controller;
 7 import org.springframework.web.bind.annotation.RequestBody;
 8 import org.springframework.web.bind.annotation.RequestMapping;
 9 import org.springframework.web.bind.annotation.RequestMethod;
10 import org.springframework.web.bind.annotation.ResponseBody;
11 
12 @Controller
13 @RequestMapping("/test")
14 public class TestController {
15 @RequestMapping(value = "/index", method = RequestMethod.POST)
16 @ResponseBody
17 public List<Integer> test(@RequestBody ArrayList<Integer> ids){
18 System.out.println("List==" + ids);
19 return ids;
20 }
21 }

注意：這種方法只適用于POST方法提交，(上面代碼中標紅的是必不可少的代碼)如果使用get方法會出現如下圖所示的錯誤

這是因為get方式的參數中的雙引號會被編碼，導致傳到后臺的不再是json串格式，所以解析出錯。

實現方式二

前端頁面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2 pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>測試</title>
 8 </head>
 9 <body>
10 <input type="button" name="request" value="請求后臺" style="width:200px;height:50px;background-color:red;margin-bottom:20px;">
11 <div name="rs"></div>
12 <input type="checkbox" name="se" value="1">hafiz.zhang<br/>
13 <input type="checkbox" name="se" value="2">jack.chen<br/>
14 <input type="checkbox" name="se" value="3">lili.wang<br/>
15 <script type="text/javascript">
16 
17 $("input[name='request']").click(function(){
18 var data = [];
19 $("input[name='se']").each(function(){
20 if($(this).prop("checked")) {
21 data.push($(this).val());
22 }
23 });
24 $.ajax({
25 type:"get",
26 url:$.wap.url + "/test/index",
27 data:{"datas":data},//或者data:{"datas[]":data}
28 dataType:"json",
29 success:function(data){
30 var str="";
31 for(var i = 0; i < data.length; i++) {
32 str += ";name=" + data[i];
33 }
34 $("div[name='rs']").html(str);
35 },
36 error:function(){
37 alert("出錯啦");
38 }
39 });
40 }); 
41 </script>
42 </body>
43 </html>

后臺接收，指定參數名必須以數組方式，如：@RequestParam("datas[]")

1).通過ArrayList接收

 1 package com.hafiz.www.controller;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import org.springframework.stereotype.Controller;
 7 import org.springframework.web.bind.annotation.RequestMapping;
 8 import org.springframework.web.bind.annotation.RequestMethod;
 9 import org.springframework.web.bind.annotation.RequestParam;
10 import org.springframework.web.bind.annotation.ResponseBody;
11 
12 @Controller
13 @RequestMapping("/test")
14 public class TestController {
15 @RequestMapping(value = "/index", method = RequestMethod.GET)
16 @ResponseBody
17 public List test(@RequestParam("datas[]") ArrayList<Integer> ids){
18 System.out.println("List==" + ids);
19 return ids;
20 }
21 }

2).通過數組進行接收

 1 package com.hafiz.www.controller;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import org.springframework.stereotype.Controller;
 7 import org.springframework.web.bind.annotation.RequestMapping;
 8 import org.springframework.web.bind.annotation.RequestMethod;
 9 import org.springframework.web.bind.annotation.RequestParam;
10 import org.springframework.web.bind.annotation.ResponseBody;
11 
12 @Controller
13 @RequestMapping("/test")
14 public class TestController {
15 @RequestMapping(value = "/index", method = RequestMethod.POST)
16 @ResponseBody
17 public Integer[] test(@RequestParam("datas[]") Integer[] ids){
18 System.out.println("ids==" + ids);
19 return ids;
20 }
21 }

注意：

1.這種方式對于get和post方式的請求同樣都適用....

2.以上兩種實現方式傳到后臺的數據不能為null,否則會報Http 400錯誤。

實現方式三

前端頁面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 <title>測試</title>
 7 </head>
 8 <body>
 9 <input type="button" name="request" value="請求后臺"
10 style="width:200px;height:50px;background-color:red;margin-bottom:20px;">
11 <div name="rs"></div>
12 <input type="checkbox" name="se" value="1">hafiz.zhang<br/>
13 <input type="checkbox" name="se" value="2">jack.chen<br/>
14 <input type="checkbox" name="se" value="3">lili.wang<br/>
15 <script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
16 <script type="text/javascript">
17 
18 $("input[name='request']").click(function () {
19 var data = [];
20 $("input[name='se']").each(function () {
21 if ($(this).prop("checked")) {
22 data.push($(this).val());
23 }
24 });
25 $.ajax({
26 type: "post",
27 url: "/test/index",
28 data: {"datas": data.join()}
29 dataType: "json",
30 success: function (data) {
31 var str = "";
32 for (var i = 0; i < data.length; i++) {
33 str += ";name=" + data[i];
34 }
35 $("div[name='rs']").html(str);
36 },
37 error: function () {
38 alert("出錯啦");
39 }
40 });
41 });
42 </script>
43 </body>
44 </html>

后端代碼

1)通過數組接收

 1 package com.hafiz.www.controller;
 2 
 3 import org.springframework.stereotype.Controller;
 4 import org.springframework.web.bind.annotation.RequestMapping;
 5 import org.springframework.web.bind.annotation.RequestMethod;
 6 import org.springframework.web.bind.annotation.RequestParam;
 7 import org.springframework.web.bind.annotation.ResponseBody;
 8 
 9 import java.util.ArrayList;
10 import java.util.List;
11 
12 /**
13 * Desc:測試控制器
14 * Created by hafiz.zhang on 2017/7/2.
15 */
16 @Controller
17 @RequestMapping("/test")
18 public class TestController {
19 @RequestMapping(value = "/index", method = RequestMethod.POST)
20 @ResponseBody
21 public Integer[] test(@RequestParam("datas") Integer[] ids) {
22 System.out.println("ids=" + ids);
23 return ids;
24 }
25 }

2).通過List接收

package com.hafiz.www.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/**
 * Desc:測試控制器
 * Created by hafiz.zhang on 2017/7/2.
 */
@Controller
@RequestMapping("/test")
public class TestController {
 @RequestMapping(value = "/index", method = RequestMethod.POST)
 @ResponseBody
 public List test(@RequestParam("datas") List<Integer> ids) {
 System.out.println("ids=" + ids);
 return ids;
 }
}

這種方式即使沒有選中任何復選框進行提交，也不會報錯！

對于想要前端傳自定義對象數組到后端，以上的方式就不適用了，那么解決辦法是什么呢？

ajax請求中設置contentType:"application/json;charset=utf-8"
ajax請求中設置data:JSON.stringify(dataList)
后端Controller種用@RequestBody YourObject[] data進行接收，并且只能用數組接收.

如果你有更好的實現方式，希望可以拿來分享。。。。

三、總結

1.實現方式一只對post方法有效，且比較繁瑣，不推薦！

2.實現方式二要求后端接收的時候必須聲明參數為數組，但可以使用數組或者list進行接收參數，如：@RequestParam("datas[]")，前端使用data:{"datas":data}或data:{"datas[]":data}都可以！且post和get方法都適用。但是不能傳空數組,限制也比較多，也不太推薦。

3.實現方式三只需要前端傳值的時候使用數組的join()方法，為空數組也不會報錯，配置簡單，要求少，且支持使用數組和list進行接收參數，比較推薦！

在線咨詢

上一篇：資深程序員推薦七大JavaScript編程工具
下一篇：肖sir_html之A鏈接標簽認識（2）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Nodejs系列課程（七）-如何提交表單并接收參數？

什么

訪問客戶端對象

window

Window 子對象

打開和關閉窗口

示例1

示例2

location

window.name屬性

window.innerHeight屬性，window.innerWidth屬性

window.pageXOffset屬性，window.pageYOffset屬性

iframe元素

window.self，window.window

window.frames，window.length

window.frameElement

window.top，window.parent

window.status

window.devicePixelRatio

navigator

Navigator.userAgent屬性

navigator.plugins屬性

screen

history

URL的編碼/解碼方法

window.getComputedStyle方法

window.matchMedia方法

alert()，prompt()，confirm()

您的項目需求

window.innerHeight屬性，window.innerWidth屬性

window.pageXOffset屬性，window.pageYOffset屬性

window.top，window.parent

alert()，prompt()，confirm()