CODEWITHSUNDEEP
ajaxjsonsinatra
Dominic Bou-Samra
Dominic Bou-Samra

Reputation: 15414

jQuery JSON post to a Sinatra route not working correctly

I have a Sinatra route that looks like this:

post '/participants/create' do
  puts request.body.read
end

And I'm hitting it using a jQuery POST:

javascript:
  $('#contact').on('submit',function () {
    $.ajax({
      url: 'participants/create',
      dataType: 'json',
      contentType: 'application/json',
      type: 'POST',
      data : JSON.stringify({ name: "Dom"}),
      success: function(json) {
        alert('all done');
      }
    })
  })

For whatever reason the body is always empty, and the request.content-type is always application/x-www-form-urlencoded. Very confused.

Upvotes: 0

Views: 3798

Answers (1)

ian
ian

Reputation: 12251

I forgot a bit because I was trying to cram everything into the comments so I'll just answer.

post '/participants/create', :provides => :json do
  # I'd use a 201 as the status if actually creating something,
  # 200 while testing.
  # I'd send the JSON back as a confirmation too, hence the
  # :provides => :json
  data = JSON.parse params
  # do something with the data, then…
  halt 200, data.to_json
  # halt because there's no need to render anything
  # and it's convenient for setting the status too
end


javascript:
  $('#contact').on('submit',function (event) {
    event.preventDefault();
    $.ajax({
      url: 'participants/create',
      dataType: 'json',
      contentType: 'application/json',
      type: 'POST',
      data : JSON.stringify({ name: "Dom"}),
      accepts: "application/json",
      success: function(json) {
        alert(json);
      }
    })
  })

Overall though, why send JSON to an HTTP server? I find it always works best to send HTTP to the server, JSON to the javascript, as that's what they both like better. YMMV.

post '/participants/create', :provides => :json do
  # Do something with the params, then…
  halt 200, params.to_json 
end

javascript:
  $('#contact').on('submit',function (event) {
    event.preventDefault();
    $.ajax({
      url: 'participants/create',
      dataType: 'json',
      type: 'POST',
      data : { name: "Dom"}, // or $(event.target).serialize()
      accepts: "application/json",
      success: function(json) {
        alert(json);
      }
    })
  })

Upvotes: 1

Related Questions