backbone.js error when using fetch but not $.ajax()

Question

I am having some trouble fetching a collection. I'm using the console's network inspector to see if I can figure out what's wrong and the only thing I see is the format of the Request Payload.

When making a .fetch() the Request Payload is being sent in this format:

query=this+is+my+query

This returns a 400 Bad Request status from my server. I have tested using:

$.ajax({
contentType: 'application/json',
async : false,
type:'POST',
url: '/search',
data: JSON.stringify({"query":"this is my query"}),
dataType: 'json',
success: function(data) {
    alert('yup');
},
error: function(data) {
    alert('nope');
}});

which returns my data as expected. In this case the Request Payload is in this format:

{"query":"enterprise search is gonna rock","scope":null}

I've tried passing in headers with my fetch:

my_results.fetch({data:{"query":"this is my query"}, type: 'POST', dataType: 'json', contentType: 'application/json'});

Here is what my Model and Collection look like:

EnterpriseSearch.Result = Backbone.Model.extend(); 
EnterpriseSearch.Results = Backbone.Collection.extend({     
  model: EnterpriseSearch.Result,
  url: "/search"
});

Any help would be appreciated.

Answer 1

Try using data: JSON.stringify({"query":"this is my query"}) in your fetch options, just like you do when using $.ajax. jQuery will default to application/x-www-form-urlencoded for form data.