Backbone Send Post data encoded as a query string

Question

I am creating a basic application that connects to the RESTful backend. When I call save () on the model, it sends the message data as compressed JSON:

{"firstName":"first","lastName":"last","Email":" [e-mail] "} 

but my server expects it to be formatted as a request:

 firstName=first&lastName=last& Email=[e-mail] 

Is there a way for the spine to send it differently?

Answer 1

The backbone does not provide anything like this. But it’s easy to override and customize it according to your needs.

Take a look at the source code: http://documentcloud.github.com/backbone/docs/backbone.html

and check that the save call, it calls the sync call in the background.

So, you need to override the Backbone.sync function with yours.

I would change the part:

 if (!options.data && model && (method == 'create' || method == 'update')) { params.contentType = 'application/json'; params.data = JSON.stringify(model.toJSON()); } 

from

 if (!options.data && model && (method == 'create' || method == 'update')) { params.contentType = 'application/json'; params.data = $.param(model); // <-- CHANGED } 

Note that I am using the jQuery parameter

If you want to use a custom function check this question: Javascript object query string encoding

[Update].
No need to change directly. Better override it with your own "Backbone.sync" function Check out the "TODO" example of the Backbone repository. It has a localStorage.js file that overrides the Backbone.sync function https://github.com/documentcloud/backbone/tree/master/examples

Answer 2

I ran into this problem at work, and Backbone.emulateJSON didn't work for me either. With some help, I was able to come up with this workaround. We redefined the Backbone.ajax function and changed the contentType to "application / x-www-form-urlencoded" and used $ .param to properly serialize the data.

 Backbone.ajax = function() { if(arguments[0].data && arguments[0].contentType == "application/json"){ arguments[0].data = $.param(JSON.parse(arguments[0].data)); arguments[0].contentType = "application/x-www-form-urlencoded"; } return Backbone.$.ajax.apply(Backbone.$, arguments); } 

Answer 3

Maybe this may help you, try: http://backbonejs.org/#Sync-emulateJSON

Answer 4

I did this by overriding the model synchronization function:

 var MyModel = Backbone.Model.extend({ "sync": function(method, model, options) { if (method == "update" || method == "create") { options = options ? _.clone(options) : {}; options['data'] = $.param(this['attributes']); } var arguments = [method, model, options]; return Backbone.sync.apply(this, arguments); } }); 

Answer 5

I find solutions, see:

• I use

  Backbone.emulateJSON = true;

• I am writing a “update” case:

   options.url = "/user/"+Math.random(1, 1000); options.type = "POST"; //.1/2 WORK //options.data = (model instanceof Backbone.Model)?model.toJSON():{}; options.data = model.toJSON(); break; 

Answer 6

Backbone.sync uses the jQuery.ajax function, so we can change jqXHR or the data sent to the server (via sendSend).

 var oldSync = Backbone.Model.prototype.sync; var SomeModel = Backbone.Model.extend({ url: 'test.json', defaults: { id: 1, foo: 'test' }, sync: function (method, model, options) { // options are passed to the jQuery.ajax _.extend(options, { emulateHTTP: true, emulateJSON: false, beforeSend: function(xhr, settings) { // settings.data is a body of our request. if (_.isString(settings.data)) { // settings.data is a JSON-string like '{"id":1, "foo":"test"}' settings.data = Backbone.$.parseJSON(settings.data); } settings.data = Backbone.$.param(settings.data); // settings.data is 'id=1&foo=test' } }); oldSync.apply(this, arguments); } }); var model = new SomeModel(); model.save(); 

In fact, we can create mixin! :)