Proper way to send an Authenticity Token with AJAX to Rails

Question

This works but gets stopped because it lacks an authenticity token:

$(".ajax-referral").click(function(){   $.ajax({type: "POST", url: $(this).parent("form").attr("action"), dataType: "script"});   return false; }); 

So I tried adding it like so:

$(".ajax-referral").click(function(){   $.ajax({type: "POST", url: $(this).parent("form").attr("action") + "?&authenticity_token=" + AUTH_TOKEN, dataType: "script"});   return false; }); 

And it passes the auth_token correctly as a param, but seems to lose the rest of my form.

Anyways to accomplish both sending the form data that works, and the authenticity token as well?

This is a rails environment. And I have this in my head.

= javascript_tag "var AUTH_TOKEN = '#{form_authenticity_token}';" if protect_against_forgery? 

Things I've tried

1.

= hidden_field :authenticity_token, :value => form_authenticity_token 

2.

$.ajax({type: "POST", url: $(this).parent("form").attr("action"), dataType: "script", authenticity_token: AUTH_TOKEN}); 

3.

// Always send the authenticity_token with ajax $(document).ajaxSend(function(event, request, settings) {     if ( settings.type != 'GET' ) {         settings.data = (settings.data ? settings.data + "&" : "")             + "authenticity_token=" + encodeURIComponent( AUTH_TOKEN );     } }); 

Answer 1

Actually, you are reading the action attribute of form and sending a post ajax request to it. to send form data you have to submit the form or you can serialize the form data and send it in ajax request like

$(".ajax-referral").click(function(){   $.ajax({       type: "POST",        url: $(this).parent("form").attr("action") + "?&authenticity_token=" + AUTH_TOKEN,        data:$(this).parent("form").serialize(),       dataType: "script"       });   return false; }); 

Doing this will serialize your form data and send it along with ajax request and authenticity token is already being sent via query string

Answer 2

This token also already appears in one of the "meta" tags in the head of the application.html.erb layout file by default if you have the following ERB at the top:

<%= csrf_meta_tag %> 

That ERB roughly renders to:

<meta content="abc123blahblahauthenticitytoken" name="csrf-token"> 

You can then grab it using jQuery with the following code:

var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content');