form-json-url传参

原创 2015年11月20日 19:51:09

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

恩,就是这样。

版权声明:本文为博主原创文章,未经博主允许不得转载。

URL传参:json参数传递转码

URL 编码 URL 只能使用 ASCII 字符集来通过因特网进行发送。 由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。 URL 编码使用 "...
  • yesicatt
  • yesicatt
  • 2017年06月06日 14:20
  • 3778

传参传参

function close(x){               alert(x.innerHTML);         }         function init(){         ...
  • Whisper_a
  • Whisper_a
  • 2014年04月21日 18:12
  • 566

&传参

&的传参的简单问题分析
  • uchiha66
  • uchiha66
  • 2017年12月24日 10:13
  • 27

传参

$bus_show=$db->table('ai9me_bus bus,ai9me_bus_city bus_city')->field('bus.id,bus.token,bus.start,bus...
  • nigind
  • nigind
  • 2013年12月04日 16:05
  • 284

值传参、指针传参、引用传参

3种传参方式:值传参、指针传参、引用传参我们知道传参方式有3种:值传参、指针传参、引用传参。这三种方式书写方式各有不同,接下来,我们简单介绍3种传参方式实现的机制。首先看一个程序:这个程序实现的是交换...
  • qq_22365361
  • qq_22365361
  • 2017年07月02日 01:46
  • 105

JAVA基础--方法传参

JAVA基础--方法传参 为啥拿这个当话题? 在初学者阶段,许多童鞋都对方法传参比较迷茫,知其然不知其所以然。 一.先说说参数传递的几个术语: 值调用(call by vale):表示方法接收...
  • Anglebeat
  • Anglebeat
  • 2014年05月24日 16:57
  • 2569

c# winform 页面传参大全

1    构造函数传值       (string)         主窗体       private string arrlOut="htht";        private void...
  • smileberry1
  • smileberry1
  • 2009年02月04日 09:52
  • 3320

AngularJS 四种传参方式

AngularJS 四种传参方式
  • yaoxudeyy
  • yaoxudeyy
  • 2016年06月22日 17:29
  • 6043

post方式 or get方式传参

所有的人都知道如下区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示。 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限...
  • dingxingmei
  • dingxingmei
  • 2013年05月14日 14:36
  • 8954

mybatis传参的几种方式

第一种:按序列传参 Public User selectUser(String name,String area); select id="selectUser" resultMap="...
  • u013895412
  • u013895412
  • 2015年07月22日 09:16
  • 3123
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:form-json-url传参
举报原因:
原因补充:

(最多只允许输入30个字)