Ajax Post request example - javascript

I was wondering if anyone could help me with a simple ajax request example just so I can wrap my head around the whole idea. I tried testing an ajax request to search the word "rails" on github. So my code looks something like this:
$.ajax({
url: 'www.github.com',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: {
q: 'rails'
},
success: function(data) {
console.log(data);
}
});
This request is responding with a 404 response. So, I'm just curious how are you supposed to know what the key names for the "data" element should be? When I inspected the search bar on github, it told me the name of the element was q. Hence why I used the key "q" and I wanted to search for say "rails". If anyone could help me with this example or perhaps provide a better one that would be greatly appreciated. Thanks!

Try to add http in your url, but, for security reason you can't do Ajax Crossdomain request without autorisation of the github.com domain in your case.
http://api.jquery.com/jquery.ajax/

Related

How to request data from an API using AJAX.

I want to make a post request to an API (http://nairabox.com/food_documentation/) using Ajax but am kind of confused on how to go about it.
This is what I have tried so far:
$.ajax({
type: "POST",
url: "https://mapp.nairabox.com:8443/api/v1/food/",
dataType : "json",
data: { case: "browse"},
headers: {
'case': 'browse'
},
success: function(data){
console.log('success');
}
})
So far, it is returning no result.
What could I be getting wrong?
The API doc is here (http://nairabox.com/food_documentation/)
The documentation you link to does not say to add any custom HTTP request headers.
You, however, are doing so here:
headers: {
'case': 'browse'
},
The case data belongs in the data and only in the data.
By adding the custom header, you are preventing the request from being simple and triggering a preflight OPTIONS request which the server does not accept.
Remove the above and you will get a response (and your success function will fire … you should probably do something with the data argument though)
Note, also, that the documentation says you should pass latitude and longitude as well as case.
Unless you add them, the response you get is unlikely to be useful.

Unable to perform a Cross domain ajax call. - JQuery

I have checked many post and tried every logic that were mentioned in various blogs and posts. But I am unable to perform a cross domain ajax call to an IIS server. Please anybody advice what else I should look into or configure it to get working. All your help is greatly appreciated.
Here is my ajax call:
var url = "http://mydomain .com/myauthorizeservice";
var jsonParam = JSON.stringify({ username: 'user007', password: 'pass007' });
$.ajax({
type: "POST",
url: url,
crossDomain: true,
data: jsonParam,
success: fnSuccess,
error: fnError,
dataType: "json",
contentType: "application/json"
});
function fnSuccess() {
alert("Success");
}
function fnError() {
alert("Error");
}
My config in the root web.config:-
Error:-
Access Denied.
I really struggled a lot to make this thing work. Here some points that also matters and restrict the cross domain calls-
Note: I am using WCF REST service. and configurations are for IIS 7.5.
1: Make sure your OPTIONSVerbHandler looks like-
2: Make sure you have the correct ordering in HandlerMappings-
Rest settings and the way to perform ajax call is mentioned in the question.
Happy coding!

Cannot get JSON data from URL

Apologies for asking what looks like a frequently asked question but I cannot seem to be able to get the data from the following URL: http://www.strava.com/stream/segments/860503
I have tried the following:
$(document).ready(function() {
$.ajax({
url: "http://www.strava.com/stream/segments/860503&callback=?",
dataType: "json",
success: function(data) {
$(document.body).append(data.latlng);
}
});
});
And:
$(document).ready(function() {
$.getJSON("http://www.strava.com/stream/segments/860503&callback=?", function(data) {
$(document.body).append(data.latlng);
});
)};
But I am not having any luck. I have fiddled around with 'json' and 'jsonp', adding the '&callback=?' to the URL as well as other things suggested on SO, but to no avail.
Any help is greatly appreciated.
That particular URL does not support JSONP. Neither does it provide support for Cross Origin Resource Sharing (CORS) via the Access-Control-Allow-Origin response header, therefore it is impossible to directly call it via ajax.
The requirement for JSONP support is that the server must output the callback name as a function, passing the JSON as a JavaScript object or array in the argument to the function. For example:
myCallback({ ...... });
A possible solution is to proxy the ajax request through a server side script on the same domain, where cross origin is not a problem for server to server requests.
the data from "http://www.strava.com/stream/segments/860503" has no callback. it is not made for cross-domain. if your script is on the same server use:you have acces to the php of the server use echo $_GET['callback'].'('.json_encode($return) .')';
else try to use [php] cURL;
please watch This Side Example I think usefull for you
http://demos.jquerymobile.com/1.0a2/experiments/api-viewer/docs/jQuery.getJSON/index.html
have you tried ? The difference being the cb instead of ? at the end of the URL.
$(document).ready(function() {
$.getJSON("http://www.strava.com/stream/segments/860503?callback=cb", function(data) {
$(document.body).append(data.latlng);
});
)};

Ajax call keeps getting blocked by browser

I am a bit stuck with an issue.
I am developing a small mobile website. I am trying to call a webservice using an ajax call, but the browser keeps blocking my call. If I start up Chrome using the tags... "--allow-file-access-from-files --disable-web-security​​" Then the call works perfectly. I have no issues whatsoever.
Now my problem is if I host the website, the browser is going to block my ajax call and the user cannot for example login or retrieve information. I present my ajax call below...
$.ajax({
async: true,
beforeSend: function () {
},
complete: function () { },
type: 'POST',
url: 'https://MySecretUrl.com/login?format=json',
contentType: 'application/json',
dataType: 'json',
data: '{"UserId":"mySecretUserId","Password":"mysecretPassowrd"}',
success: function (resultMessage) {
if (resultMessage.WasSuccessful == true) {
alert('YAY');
} else {
alert('Semi Yay');
}
},
error: alert('OOOOPS')
});
Does anybody know a workaround for getting information from the webservice without any browser blocking the ajax call ?
Any suggestions would be greatly appreciated.
Thanks in advance for the help.
EDIT
Hi Guys, Ok so I did some more digging and discovered the following.
When the request is made with browser security, the call changes the POST to a OPTIONS. this is called a preflighted request. One workaround that I have found is if you are making a GET call, then you can use jsonp as your data type. But now my problem is that it is incompatible with POST. Is there any fix that does not require the webservice to be changed ?
Is there any fix that does not require the webservice to be changed ?
No. If changing the webservice isn't an option, your only option is to not use the browser to make this request.
You must either make the server return the data in a format that can be accepted cross-domain, or don't make cross-domain requests with the browser.

How do I pass or parse that access_token from the Dom to a Variable I can then Store and call for access_token?

With help from others I've gotten to the point where I can see the json return from foursquare but any attempts to call it yield an error.
Essentially, if I'm in Firebug and look at the net objects I see the status 200
If I click on the JSON tab I can see my access_token, but how do I extract it from there so I can use for API calls?
Here's the latest code tried.
var jsonUrl = url +"&callback=?";
var access_token;
$("#getJSON").click(function() {
$.getJSON(jsonUrl, { dataType: "JSONP" }, function(json){
...
access_token = json.access_token;
...
});
});
also tried
$.ajax({
dataType: 'jsonp',
jsonp: 'callback',
url: url,
success: function (json) {
console.log(json.access_token);
},
});
But when I try and alert(access_token); or run a foursquare api call I get the following errors
Resource interpreted as Script but transferred with MIME type application/json.
Uncaught SyntaxError: Unexpected token :
checkinsGET https://api.foursquare.com/v2/users/self/checkins?oauth_token=undefined&format=json 401 (Unauthorized)
I feel like its ready and waiting for me to call it, but how on earth do I print it from the Dom into a var that I can use? Been fighting for hours and been trying all my research techniques for some reason this one's elluding me. Thanks for everyone's help so far, I'm really hoping to get passed this!
Try removing the "&callback=?" from the url. I think jQuery adds that for you if you set the dataType to jsonp.
EDIT:
from the jquery ajax documentation describing the dataType parameter:
"jsonp": Loads in a JSON block using
JSONP. Will add an extra "?callback=?"
to the end of your URL to specify the
callback.

Categories