How do you send JSON data in a rails-ujs Rails.ajax POST call (not using jQuery)?

Question

I have a React client app that needs to talk to a Rails API. I want to use the rails-ujs method Rails.ajax. For example:

Rails.ajax({   type: "POST",    url: "/things",   data: mydata,   success: function(response) {...},   error: function(response) {...} }) 

It looks like I can't set data to a JSON object like this:

mydata = {  thing: {   field1: value1,   field2: value2, }} 

I need to convert it to a application/x-www-form-urlencoded content type manually like this:

mydata = 'thing[field1]=value1&thing[field2]=value2' 

This is ok for flat data but gets complicated quickly for nested data.

jQuery does the conversion automatically before making a request.

So I'm wondering if Rails UJS has some automatic way of doing it, but I couldn't find anything in the docs or code.

Answer 1

When using Rails UJS, data must be formatted as string form parameters. Unfortunately, it's not possible to provide JSON, at least not currently with Rails 6.0.2 (not ideal).

Solution

Use URLSearchParams to convert JSON to URL paramaters:

myData = {  thing: {   field1: value1,   field2: value2, }}  Rails.ajax({   type: "POST",   url: "/things",   data: new URLSearchParams(myData).toString() }) 

Answer 2

Here is my workaround to put/post with Content-Type: application/json.

It works by setting options.data in the beforeSend callback. This way the internal Rails.ajax.createXHR method does not set the Content-Type header first. https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/ajax.coffee#L53

    Rails.ajax({       url: 'http://some-url.com',       type: 'put',       beforeSend(xhr, options) {         xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')         // Workaround: add options.data late to avoid Content-Type header to already being set in stone         // https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/ajax.coffee#L53         options.data = JSON.stringify(data)         return true       },     });