JavaScriptSerializer实现序列化 在 MVC 中 方法中如何获取控件的值

[zhengyingcan]

MVC我们以前都是如下写法
function saveData() {
var notext = $("#no").val();
var ha01text = $("#ha01").val();
var ha02text = $("#ha02").select2('data')[0].text;
var ha03text = $("#ha03").select2('data')[0].text;
var ha04text = $("#ha04").select2('data')[0].text;

var data = {
no: notext,
ha01: ha01text,
ha02: ha02text,
ha03: ha03text,

};
var jsdata = JSON.stringify(data);
$.ajax({
url: "/Hpsn/Add",
type: "POST",
data: jsdata,
dataType: "JSON",
contentType: "application/json",
success: function (res) {
parent.layer.msg(res);
}
});

但是高人告诉我这样子写太费力，他们用的方法 直接序列化整个页面，或者一段<form id="sdf"></from>
如下：
1.serialize()方法

　　格式：var data = $("#formID").serialize();

　　功能：将表单内容序列化成一个字符串。

　　这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize()即可。
我疑惑的是在控制器方法里如何获取到 from 里面的值呢，毕竟没有数据绑定呀

[以专业开发人员为伍]

.serialize() 函数会遍历 <form> 里边所有的 dom 的 val() 并且打包输出。回答“毕竟没有数据绑定呀”的问题最好的方法就是自己找一个 http 调试器来调试、测试一下 http 消息。

[zhengyingcan]

引用 7 楼 lescper2011 的回复:

控制器有一个方法可以获取到所有的参数。 Request.Params这是所有的参数。你可以手动截取需要的参数。

原来这么简单，但是我不打算测试了，毕竟大神说了如下的话 所以其实提交 <form> 过去10年也许是标准方式，而现在随着web编程时代的变迁它反而是越来越少用，甚至几乎不用。而是直接用你的前边的写法。 看来我一直做的才是主流，呵呵，太棒了 我还看到一本书，居然用jquery ，把整个页面都序列化成 json 格式， 看来这种方式已经淘汰了，我真高兴。

[以专业开发人员为伍]

你后边写的那个写法能获得 <form> 里边需要提交的 dom 组件的 val() 值，但是绝对不可能包括你写的 .text 的值。更何况大多数面向后台服务接口进行前端设计时，要提交的 data 是灵活且复杂一点的 javascript 对象结构，而不是几个 dom 的 val() 值。 所以，仅仅在简单的并且恰好是你要提交<form> 的情况下你才应该使用 form.serialize()。

[以专业开发人员为伍]

关于你说的“毕竟没有数据绑定呀”这是不对的，<form>的含义其实本身就是绑定值并且勇于刷新页面时回发这些值来用的。建议你从 http request/response 消息调试入手来学习 web 基础，这样就能知道 <form> 有没有绑定什么值了。 实际上如果要设计后台服务接口，就不要纠结前端的什么<form>，而是独立地作为服务接口而设计。特别是当你用一些前端框架时，你是直接拿出内存中的一些数据来提交，就当作一个普通的纯粹数据的上行、下行操作而不考虑前端界面，编写代码时其实根本不关心有没有什么<form>。所以你贴的后边的方式，其实只在你刚刚好要提交<form>并且也没有更多数据属性时才用得上，如果你不是这个想法那么也就不用这个做法，用你原来的做法其实更适合。

[lkf181]

在<form>里提交数据，最方便

[圣殿骑士18]

var data = $("#formID").serialize(); --- 其实你调试观察一下data的值，你就明白了。它的格式实际上就是跟url的get请求带参数的模式是一样的，所以就跟页面请求页面，服务端处理的方式是统一的，当然可以获取到数据。

[以专业开发人员为伍]

比如说表达式 $("#ha02").select2('data')[0].text 这里的选择机制，甚至这个 id 可能是变量，甚至其实是一些真正的独立数据，都可以看出你的后台数据接口是否纠结于<form>。 基于流行的前端框架的的前端程序，其实在提交时传入的数据是跟 dom 无关的，前端框架不管是 MVC 还是 MVVM 都有独立的数据模型，由数据来改变界面，而不是由界面来查询这些内部数据。比如说我们开发一个千变万化的前端web界面程序，一个复杂的动态表单（显然，表格中还有嵌套表格），你可能在任何需要跟后台交互的地方都随时访问后台服务接口。如果你纠结于 <form> 那就是另外一种设计方式了。至少从你前边贴出的代码，完全没有用什么比较专业的前端框架来分层开发，但是已经可以从 .select2('data')[0] 这里看出你需要基本的灵活性了。当你越来越专业地需要灵活性的时候，就会扔掉从页面上的一个 <form> 出发的数据服务设计想法，编写出独立的与界面无关的数据服务接口。

[以专业开发人员为伍]

如果一个人刚学了一个“登录界面”，在界面上摆了几个 <input type=text> 用来输入账号密码，那么他按照范例很可能就会设计一个 <form> 用来提交数据并且页面重定向。而 ajax 方式下就会调用这个 form.serialize。这个没有任何问题。 但是反过来说，如果你设计编写大一点的 web 前端程序，你的数据服务功能接口就基本上都倾向于独立功能服务，不纠结于界面 <form>。拿你的这个代码为例（实际上你的代码还不能上我们的工作岗位），你的 data 变量中的对象其实就不方便于硬要在 html 里放到一个 <form> 中。 所以其实提交 <form> 过去10年也许是标准方式，而现在随着web编程时代的变迁它反而是越来越少用，甚至几乎不用。而是直接用你的前边的写法。

[lescper2011]

控制器有一个方法可以获取到所有的参数。 Request.Params这是所有的参数。你可以手动截取需要的参数。

[娃都会打酱油了]

其实你可以给你的html控件加标签，这样就可以通过$('[attr=xxx]')之类的一次性取到所有你需要的控件，然后遍历赋给json

[lovebaby]

一个手动，一个自动的区别

[zhengyingcan]

引用 10 楼 starfd 的回复:

其实你可以给你的html控件加标签，这样就可以通过$('[attr=xxx]')之类的一次性取到所有你需要的控件，然后遍历赋给json

有没有案例呀，这个方法 真好，就是不懂，有没有详细的文章呢

[娃都会打酱油了]

var data={};
for(var o in $('[item]')){
var key = $(o).attr("it_key");
data[key]=$(o).value();
}

大致这样写

[正怒月神]

$("form").serialize() 会自动把控件对应的 name和value 组装起来。