【第22期】观点:IT 行业加班,到底有没有价值?

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

恩,就是这样。

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

相关文章推荐

drupal7 创建form表单 并重定向提交路径同时使用get方式传递(drupal 简洁url)传参实例演示

1、 指定创建form的函数,并传递参数 $formhtml = drupal_render(drupal_get_form('create_form', 'get_name',a,b,c)); ...

FormPanel,EditorGridPanel的赋值和传参、数据的保存删除

FormPanel,EditorGridPanel的赋值和传参、数据的保存删除   首先,需要注意几个问题:<

C#跨平台调用接口(URL传参GET调用和Post Json传参调用)

方法一:URL传参POST调用 使用HttpWebRequest,将参数POST调用   string HampsonURL = new BSysConfig().GetValue(ConfigK...

插件 文件上传插件 ajaxfileupload.js插件

注意:使用ajaxfileupload.js传参的问题,通过以下方式可以解决ajaxfileupload.js传参问题。 下载的ajaxfileupload.js插件上传文件时不能传参; 此插件通过一个IFrame并在IFrame中创建一个form表单来实现文件上传,而在我的应用中还需要带一些其他的文本参数,而此插件并未提供此功能;既然是动态创建form表单,那么更定能加入其他参数的,请看代码(注意第41行)。 【我发现这个插件的异步请求返回值有些问题,如果dataType设为text,则服务器返回的text文本的前后会被包围!!】 [code="

Spring Boot 传参方式

Spring Boot 传参方式
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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