使用XMLHttpRequest导轨将有效载荷数据发布到数据库

Question

I'm working on a tournament bracket based on the GOjs library , The bracket has score input.

Once my user is done editing the bracket I save the bracket into a JSON variable :

function save() {
    var tojs = myDiagram.model.toJSON();
    var payload = JSON.parse(tojs);
    stringify_tojs = JSON.stringify(payload);
    myDiagram.isModified = false;

I use XMLHttpRequest to able to post the payload into my rails model that handles 'payload' :

var request = new XMLHttpRequest();
    request.onload = callback;
    request.open("post", "http://localhost:3000/malesingles");
    request.setRequestHeader("Content-Type", "application/json");
    request.send(payload);

I don't know where I went wrong but I'm certain it's around my controller params but I can't find my mistake already been a week, the controller looks something like this :

@tournoi = Tournoi.new(bracket_params)
  if @tournoi.save
    redirect_to root_url
    flash[:success] = "Your tournament bracket has been validated!"
  #  redirect_to @tournoi
  else
    render 'new'
  end

end

I have included the bracket_params in private settings

def bracket_params
      params.require(:tournoi).permit(:payload)
     end

Tried different method to post the payload none really work, would appreciate some help to understand where I went wrong, I get a param is missing or empty :/.

Answer 1

@DezzH check out my latest commits from my repo https://github.com/fabriziobertoglio1987/sprachspiel/tree/feature/purchase-system I just built something like that using coffescript.. the commits include description of my work

basically what I figured out is, post request do not pass the parameters in the url so it is not easy to find them in the request, but you can check in your network tab

as you can see from the image I am passing

 createPurchase: -> 
    $.ajax
       url: "/products"
       method: "POST"
       dataType: "json"
       data: { items: {product_id: '1', name: 'test' }}
       error: (jqXHR, textStatus, errorThrown) ->
         console.log "AJAX Error: #{textStatus}"
       success: (data, textStatus, jqXHR) ->
         console.log "Successful AJAX call: #{data}"
         console.log data

then I set just a binding.pry in the controller and I can see my params there