最近的没有更博客,因为跟了一个项目,才发现自己的知识量远远不足,做项目到现在,收获的也知识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" οnblur="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 οnclick="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) +"]",
恩,就是这样。