早起早睡的少年郎

懂得自己的渺小,要学的东西还很多.

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

恩,就是这样。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ReusLi/article/details/49951171
文章标签: jquery javascript json
个人分类: JavaScript
上一篇搭建tomcat服务器,目标可通过外网ip访问本机
下一篇React Webpack报错
想对作者说点什么? 我来说一句

asp.net传参小结 asp.net传参小结

2010年07月21日 7KB 下载

JavaScript页面传参

2010年09月28日 3KB 下载

分析java的传值问题

2010年01月31日 2KB 下载

wpf 不同窗口传参 传参新程序

2017年05月12日 17.65MB 下载

水晶报表 传参

2009年04月14日 49KB 下载

Vc++6.0Vb6.0WS2010调用Vc写的DLL

2013年10月17日 116KB 下载

jsp,servlet分页SQL传参Servlet翻页

2011年05月03日 568KB 下载

QueryString 传参加密算法

2010年11月11日 5KB 下载

没有更多推荐了,返回首页

关闭
关闭