form-json-url傳參

最近的沒有更博客，因爲跟了一個項目，才發現自己的知識量遠遠不足，做項目到現在，收穫的也知識learn more learn fast的決心。

今天在做前端表單部分發現了一些很懶的代碼，mark下來。

關於：js裏獲取form轉換爲json，通過ajax url傳到servlet

首先說明的是，url裏面不能有對象，所以json對象要變成字符串放在url。

代碼html 

<span style="white-space:pre">	</span><form id="stdMsg">
		<table>
			<tr>
				<td>
					<label for="name">學生姓名:</label> 
					<input name="studentname" onblur="hintname()" id="newName" onBlur="hintname()"/>
				</td> 
			</tr> 
			<tr> 
				<td> 
					<label for="sex">性別:
					</label> <input checked="true" type="radio" name="sex" value="男">女生<input type="radio" name="sex" value="女"> 
				</td> 
			</tr> 
			<tr> 
				<td> 
					<label for="team">小隊:</label>
					<select name="team" id="newTeam">
						<option value="1">1</option>
						<option value="2">2</option>
					</select>
				</td>
			</tr> 
			<tr> 
				<td> 
					<button onclick="addStudent()">
						提交
					</button>
				</td> 
			</tr>
		</table>
	</form>

代碼 js

var data = $("#stdMsg").serializeArray(); //自動將form表單封裝成json  
JSON.stringify(data);

這種方法，可以輕鬆接收form表單的數據，但是轉換的json會是這樣的：

[ 
  {name: 'studentname', value: '張三'}, 
  {name: 'sex', value: '男'},
  {name: 'team', value: '1'},
]

那麼不利於傳到servlet後的解析。

所以有更好的方法：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

JSON.stringify($("#form").serializeObject());

var data = $("#stdMsg").serializeArray();

這種方法會吧上面的json裏面的name屬性和value屬性去掉，直接變成 "sex":"男"的樣式。

但是servlet後面的dal會提示你json要以[開頭，]結束，所以，在ajax的url傳參，我們應該

url: "MyServlet?method=addStudent&json=[" + JSON.stringify(data) +"]", 

恩，就是這樣。