Question

我正在开发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的新手，很抱歉，如果这是微不足道的。

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

非常感谢。

Answer 1

对于仅序列化为JSON，还有

这个选项

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

Answer 2

将表单输入序列化为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方法。

Answer 3

Backbone不会对您如何实现行为做出任何假设。它只提供了一个干净的建筑模式。因此，您实现表单序列化的方式似乎很好（类似于或改编自：Convert form data to JavaScript object with jQuery）

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

在您看来：

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

Answer 4

另一种解决方案是使用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();
  }
});

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

4 个答案: