将表单数据序列化为JSON

我想在Backbone.js模型中对表单进行一些服务器前验证。为此，我需要将用户输入的表单转换为可用的数据。我找到了三种方法:

var input = $（“#inputId”）.val（）; var input = $（“form.login”）.serialize（）; var input = $（“form.login”）.serializeArray（）;

不幸的是，没有一个提供我所需要的良好的可读和可开发的JSON对象。我已经浏览了Stack Overflow上的几个问题，但我只找到了一些额外的库。

现在的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();

当前回答

你可以这样做:

函数onSubmit(form){ var data = JSON。stringify($(form).serializeArray());// <----------- Console.log (data); 返回错误;/ /不提交｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <form onsubmit='return onsubmit (this)'> <input name='user' placeholder='user'><br> <input name='password' type='password' placeholder='password'><br> <按钮类型= '提交' > > < /按钮试试 > < /形式

请看这个:http://www.json.org/js.html

2012-07-05 06:27:26

其他回答

我找不到一个可以解决这个问题的答案:

[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]

调用这个对象:

{Vehicle: {Make: "Honda", "VIN": "123"}}

所以我必须自己写一个序列化器来解决这个问题:

function(formArray){
        var obj = {};
        $.each(formArray, function(i, pair){
            var cObj = obj, pObj, cpName;
            $.each(pair.name.split("."), function(i, pName){
                pObj = cObj;
                cpName = pName;
                cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
            });
            pObj[cpName] = pair.value;
        });
        return obj;
    }

也许它会帮助别人。

2014-08-11 09:28:50

使用Underscore.js:

function serializeForm($form){
    return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; }));
}

2014-10-05 22:14:44

你可以这样做:

请看这个:http://www.json.org/js.html

2012-07-05 06:27:26

下面的代码可以帮助您。：）

 //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>

2014-03-15 06:24:40

使用jQuery并避免serializeArray，下面的代码以JSON格式序列化并发送表单数据:

$("#commentsForm").submit(function(event){
    var formJqObj = $("#commentsForm");
    var formDataObj = {};
    (function(){
        formJqObj.find(":input").not("[type='submit']").not("[type='reset']").each(function(){
            var thisInput = $(this);
            formDataObj[thisInput.attr("name")] = thisInput.val();
        });
    })();
    $.ajax({
        type: "POST",
        url: YOUR_URL_HERE,
        data: JSON.stringify(formDataObj),
        contentType: "application/json"
    })
    .done(function(data, textStatus, jqXHR){
        console.log("Ajax completed: " + data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        console.log("Ajax problem: " + textStatus + ". " + errorThrown);
    });
    event.preventDefault();
});

2014-05-20 23:15:24

将表单数据序列化为JSON

推荐文章

最新文章

标签