Develop Reference

Posting raw data to a WebAPI using JQuery and AJAX

I am trying to work out how to post raw data to a webAPI using JQuery and Ajax, but I cannot seem to get the data to be sent across.
The endpoint works in Postman:
Here is my rather simple JQuery:
$.ajax({type: "POST", url: myUrl, data: ["21924"]});
What am I missing? This is not my usual area so I've had a good look through other questions, but non seem to quite fit! How do I recreate this Postman call via JQuery and Ajax?
Thanks.

Try specifying the data type and stringifying your data, like this:
$.ajax({
type: "POST",
url: myUrl,
data: JSON.stringify(["21924"]),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){console.log(data);},
failure: function(errMsg) {console.log(errMsg);}
});

Web API Not Returning data using JQuery Ajax

I am newish to JQuery Ajax.
My code below always return the error function. Am I doing something wrong? I can see the json data in the response header using firebug I can't get the success function to work.
var url = "http://ec.europa.eu/budg/inforeuro/api/public/monthly-rates"
$.ajax({
crossOrigin: true,
type: "GET",
crossDomain: true,
async: false,
url: url,
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
contentType: "application/json",
success: function (data) {
console.log("Success");
},
error: function () {
console.log("Ajax Error Occurred");
}
});

Are you sure the source you're using the JSONP request on actually supports JSONP?
When calling the url http://ec.europa.eu/budg/inforeuro/api/public/monthly-rates?callback=foo (note the callback param) the response from the server does not contain a valid JSONP response (which would contain a call to the foo function).

Rails post can't verify CSRF token authenticity

I've check this WARNING: Can't verify CSRF token authenticity rails
but I still can't figure it out why it cause this error.
Here is my ajax
$.post(
"<%= ajax_chats_path %>",
{timestamp :(new Date()).getTime(),msg: $('#msg').val()},
function (json) {
console.log(json);
});
If I add this
skip_before_action :verify_authenticity_token
in controller, it can solve this problem.
I am not sure it's the right way to do, because it looks like it may encounter some security attack.

You're missing the CSRF token in your Ajax call. You'll need to use a long-form $.ajax call, and add this:
beforeSend: $.rails.CSRFProtection
Instead of $.post, you can use the $.ajax equivalent, which would look like this:
$.ajax({
type: "POST",
url: "<%= ajax_chats_path %>",
beforeSend: $.rails.CSRFProtection,
data: {
timestamp: (new Date()).getTime(),
msg: $('#msg').val(),
beforeSend: $.rails.CSRFProtection
},
success: function (json) {
console.log(json);
}
});
You should also strongly consider adding the datatype field to the call, so that jQuery knows the disposition of the response and can handle it accordingly. You can choose from any of "xml", "json", "html", "script", "jsonp", or "text". See the jQuery.ajax() API documentation for more details.

This is worked for me,
$.ajax({
beforeSend(xhr) {
xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
},

Google calendar returns not a valid json file

We are making a website with AngularJS. We need the google calendar events.
I try to load the data from a Google Calandar.
here you can find the json file: http://www.google.com/calendar/feeds/nmk97b3l07ncb9f9h5ap5ffo2c#group.calendar.google.com/public/full?alt=json-in-script&callback=insertAgenda&orderby=starttime&max-results=15&singleevents=true&sortorder=ascending&futureevents=true
But Angulair does not recognize it as a json file.
Is there a way to get this as json file?

insertAgenda is the jsonp-callback-parameter.
Try this:
var url = 'http://www.google.com/calendar/feeds/nmk97b3l07ncb9f9h5ap5ffo2c#group.calendar.google.com/public/full?alt=json-in-script&callback=insertAgenda&orderby=starttime&max-results=15&singleevents=true&sortorder=ascending&futureevents=true';
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'insertAgenda', //The callback parameter in Google Calendar response
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
console.dir(json);
}
});
DEMO

Paraimpu HTTP POST REQUEST

I am trying to make a http POST request from my Jquery mobile application(hosted on Amazon S3) to "http://paraimpu.crs4.it/data/new" to insert data into my sensor on the Paraimpu site. This is the request I'm making:
data = "Test";
valueToSend = '{"token":"c9d1cee6-da40-4e97-afc8-209045786b04","content-type":"application/json","data":' + data + '}';
$.ajax({
url: "http://paraimpu.crs4.it/data/new",
type: "POST",
data: valueToSend,
dataType: "json",
crossDomain: true,
contentType:"application/json",
success: function(){
alert('Success');
}
});
I keep getting
XMLHttpRequest cannot load http://paraimpu.crs4.it/data/new. Origin
"http://webappz.s3-website-us-east-1.amazonaws.com" is not allowed by
Access-Control-Allow-Origin.
I know this is because of the cross domain policy, but how can I get around this? The instructions on the paraimpu page are pretty vague and just says:
Push new sensor data doing an HTTP POST to:
http://paraimpu.crs4.it/data/new
with content like: {"token":"c9d1cee6-da40-4e97-afc8-209045786b04",
"content-type":"text/plain", "data":RAW DATA}

data = "Test";
valueToSend = '{"token":"c9d1cee6-da40-4e97-afc8-209045786b04","content-type":"application/json","data":' + data + '}';
$.ajax({
url: "http://paraimpu.crs4.it/data/new",
type: "POST",
data: valueToSend,
dataType: "jsonp", //set datatype to jsonp
crossDomain: true,
jsonp: false,
contentType:"application/json",
success: function(){
alert('Success');
}
});​
These are the parts that you were missing:
dataType: "jsonp": The type of data that you're expecting back from the server. "jsonp", loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.
jsonp: false: Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }
More on this here: jQuery.ajax()