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

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

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

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

我的问题：

1. 将表单输入序列化为JSON的最佳方法是什么？ 也许只有Backbone解决方案？
2. 表单输入序列化为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

 
 
 Name:  Surname:   
 
  

我是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不会对您如何实现行为做出任何假设。 它只提供一个干净的建筑模式。 因此，您实现表单序列化的方式似乎很好（类似于或改编自： 使用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); } 

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