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" ο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) +"]", 

恩,就是这样。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值