问题使用Backbone.js将表单输入序列化为JSON

我正在开发RESTful应用程序 - 我在服务器端使用Java，在前端使用Backbone。 2将通过JSON进行通信。

我的应用程序有很多表单，我想：

将表单输入序列化为JSON
将JSON发送到服务器

我的问题：

将表单输入序列化为JSON的最佳方法是什么？也许只有Backbone解决方案？
表单输入序列化为JavaScript对象后 - 将JSON发送到服务器的最佳方法是什么？

我的代码到目前为止：

Javascript和Backbone

$(function(){
    $.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;
    };

    //Model 
    var SignupForm = Backbone.Model.extend();

    //View
    var SignupView = Backbone.View.extend({
        el: '.signupForm',
        events: {
            'click input.submit': 'getStatus'
        },
        getStatus: function(event){
            var data = JSON.stringify($('form').serializeObject());
            $('.test').html(data);
            return false;
        }
    });

    var signupForm = new SignupForm();
    var signupView = new SignupView({
        model: signupForm
    });
});

HTML

<div class="signupForm">
    <form class"signup">
        <label for="name" >Name:</label>
        <input type="text" id="name" name="name" />

        <label for="surname" >Surname:</label>
        <input type="text" id="surname" name="surname" />

        <input type="submit" value="submit" class="submit" />
    </form>

    <div class="test"></div>
</div>

我是Backbone的新手，很抱歉，如果这是微不足道的话。

我热衷于尽可能以最好的方式编写我的应用程序代码，所以请随时告诉我是否有更好的方法来执行此操作。

非常感谢。

8688

2018-01-28 01:03

起源

答案:

对于仅序列化为JSON，也有这个选项

https://github.com/marioizquierdo/jquery.serializeJSON

2017-08-14 21:28

正是我所寻找的 - 听取Rails惯例的表单命名，易于集成到任何后端解决方案中。 - Duke

答案:

对于仅序列化为JSON，也有这个选项

https://github.com/marioizquierdo/jquery.serializeJSON

2017-08-14 21:28

正是我所寻找的 - 听取Rails惯例的表单命名，易于集成到任何后端解决方案中。 - Duke

将表单输入序列化为JSON的最佳方法是什么？也许是只有Backbone解决方案？

使用 Backbone.Forms 将表单数据读入模型。

例如：

var User = Backbone.Model.extend({
    schema: {
        title:      { type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },
        name:       'Text',
        email:      { validators: ['required', 'email'] },
        birthday:   'Date',
        password:   'Password',
        address:    { type: 'NestedModel', model: Address },
        notes:      { type: 'List', listType: 'Text' }
    }
});

var user = new User();

var form = new Backbone.Form({
    model: user
}).render();

$('body').append(form.el);

一旦表单输入序列化为JavaScript对象 - 是什么将JSON发送到服务器的最佳方法？

之后，您可以将模型与REST服务同步。您必须在模型上设置url属性，然后调用save方法。

2018-04-24 01:24

Backbone不会对您如何实现行为做出任何假设。它只提供一个干净的建筑模式。所以你实现表单序列化的方式似乎很好（类似于或改编自：使用jQuery将表单数据转换为JavaScript对象）

就持久性而言，您可以在单击提交按钮时设置模型的属性。

在你看来：

getStatus: function(event){
            var data = JSON.stringify($('form').serializeObject());
            this.model.set(data);

 }

在你的模型中：

initialize: function(){
   //This will save attributes every time a change event is triggered.
   this.bind("change", this.save);
}

2018-01-28 01:39

您可以使用，而不是绑定到模型上的“更改”事件 this.model.save(data); 代替 this.model.set(data);。 - Paul Hoenecke

谢谢你们的回答 - John

另一种解决方案是使用 backbone.syphon 扩展，它允许您以与实体创建它相同的方式简单地提交表单：

Backbone.View.extend({
  events: {
    "submit form": "formSubmitted"
  },

  formSubmitted: function(e){
    e.preventDefault();

    var data = Backbone.Syphon.serialize(this);
    this.model.set(data);

    this.model.save();
  }
});

2017-10-23 14:02

非常有用的插件...谢谢@Prisoner - Raj Adroit

问题 使用Backbone.js将表单输入序列化为JSON

答案:

答案:

热门问题

问题使用Backbone.js将表单输入序列化为JSON