如何将表单数据序列化为JSON?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (103)

我想在Backbone.js模型中对表单进行一些预服务器验证。为此,我需要将来自表单的用户输入转化为可用数据。我发现了三种方法来做到这一点:

  1. var input = $("#inputId").val();
  2. var input = $("form.login").serialize();
  3. 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();
提问于
用户回答回答于

你可以这样做:

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>
用户回答回答于

下面是这个用例的一个函数:

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);

扫码关注云+社区

领取腾讯云代金券