将表单数据序列化为JSON
将表单数据序列化为JSON
提问于 2012-07-05 14:21:31
我想对Backbone.js 模型中的表单进行一些服务器前验证。为此，我需要将表单中的用户输入转换为可用的数据。我找到了三种方法来做到这一点：
var input = $("#inputId").val();var input = $("form.login").serialize();var input = $("form.login").serializeArray();
不幸的是，它们都没有提供我所需要的良好的可伸缩和可开发的JSON对象。我已经看了几个关于Stack和Overflow的问题，但我只找到了一些额外的库。
Underscore.js，当前的jQuery或Backbone.js不是提供了一个助手方法吗？
我无法想象没有这样一个函数的请求。
HTML
<form class="login">
<label for="_user_name">username:</label>
<input type="text" id="_user_name" name="user[name]" value="dev.pus" />
<label for="_user_pass">password:</label>
<input type="password" id="_user_pass" name="user[pass]" value="1234" />
<button type="submit">login</button>
</form>JavaScript
var formData = $("form.login").serializeObject();
console.log(formData);输出
{
"name": "dev.pus",
"pass": "1234"
}Backbone.js型号
var user = new User(formData);
user.save();回答 15
Stack Overflow用户
发布于 2012-07-05 14:41:58
下面是这个用例的一个函数：
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}用法：
var $form = $("#form_data");
var data = getFormData($form);Stack Overflow用户
发布于 2012-07-05 14:27:26
您可以这样做：
function onSubmit( form ){
var data = JSON.stringify( $(form).serializeArray() ); // <-----------
console.log( data );
return false; //don't submit
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit='return onSubmit(this)'>
<input name='user' placeholder='user'><br>
<input name='password' type='password' placeholder='password'><br>
<button type='submit'>Try</button>
</form>
Stack Overflow用户
发布于 2014-03-15 14:24:41
下面的代码应该能帮你解决这个问题。:)
//The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
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;
};
$(function() {
$('form.login').on('submit', function(e) {
e.preventDefault();
var formData = $(this).serializeObject();
console.log(formData);
$('.datahere').html(formData);
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11338774
复制相关文章
相似问题