Is it possible to send the cross domain URL request and read the response using JSONP?
Could you please give me some samples?
I am trying to send URL request to a different domain using xhr but couldn't read the response
Please help
Thanks in Advance
You can check with blow example:
$(document).ready(function(){
$.ajax({ // ajax call starts
//crossOrigin: true,
type: "GET",
url: 'http://www.google.com', // JQuery loads areas
dataType: 'json', // Choosing a JSON datatype
async: false,
success: function(data) // Variable data contains the data we get from serverside
{
console.log(data);
}
});
});
Related
I've the below code which I'm using to hit a node.js endpoint. However when it is getting hit, the endpoint URL appends an & to it like this,
http://localhost:3004/expenses/?q=&12/02/2014
Hence I'm not getting the desired result back.
Here is how my code looks like,
$('#myForm').on('submit', (e)=>{
e.preventDefault();
$.ajax({
type: 'GET',
url: 'http://localhost:3004/expenses/?q=',
processData: false,
data: $('#startDate').val(),
contentType: 'application/json',
success:(data, status)=>{
// alert(status);
},
error:()=>{
alert('problem');
}
})
})
Can someone shed some light?
The issue is most likely related to the processData: false telling jQuery to not format the data for the request, and the GET url already containing ? in it. Given that you are not giving the request json, I would suggest reducing your call to simplify the issue.
$.ajax({
type: 'GET',
url: 'http://localhost:3004/expenses/',
data: { q: $('#startDate').val() },
success:(data, status)=>{
// alert(status);
},
error:()=>{
alert('problem');
}
});
If you do not give the processData in the options, it will convert the data you give it to a query param for the request. Given that this is a GET request, it will generate the ?q=<value> for you. And as mentioned in the comments, you do not need contentType: application/json on the options as that is telling jQuery to put the content type on the request so the server knows you are sending it json in the body. Which you are not, :)
So I am a bit lost and hoping you can help me out. I am writing an app in simple PHP/HTML/Javascript app.
My Goal: To POST json data to an API.
How can I go about this? I just can't find any good examples to show me the best way to handle this.
In my request I need to send Basic Authorization as well as the json values.
This is what I have right now
$.ajax({
type: "POST",
url: "host.com/api/comments",
dataType: 'json',
async: false,
headers: {
"Authorization": "Basic xxxxxxxxxxxxxxxxxxxxxxx"
},
data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
success: function (){
alert('Comment Submitted');
}
});
I can't get the above code to work. Im using a button to call a function that will start the ajax call but nothing is happening.
Any help be be amazing! Thank You.
Use
contentType:"application/json"
You need to use JSON.stringify method to convert it to JSON format when you send it,
And the model binding will bind the json data to your class object.
The below code will work fine (tested)
$(function () {
var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
type: "POST",
data :JSON.stringify(customer),
url: "api/Customer",
contentType: "application/json"
});
});
If you're writing the API in PHP, and it uses $_POST to get the parameters, you shouldn't send JSON. PHP only knows how to decode multipart/form-data and application/x-www-form-urlencode. If you pass an object to $.ajax, jQuery will use the urlencode format.
Just take the quotes off the object that you're passing to the data: option.
$.ajax({
type: "POST",
url: "host.com/api/comments",
dataType: 'json',
async: false,
headers: {
"Authorization": "Basic xxxxxxxxxxxxxxxxxxxxxxx"
},
data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},
success: function (){
alert('Comment Submitted');
}
});
You also shouldn't use async: false, it is deprecated. Learn to write proper async code.
Nobody seems to have addressed one issue - the URL
If the page this is requested from is http://yourhost.com/path/file.html the request will be sent as http://yourhost.com/path/host.com/api/comments
As you have host.com in the URL, I assumed the request is to a different domain?
use one of
http://host.com/api/comments
https://host.com/api/comments
//host.com/api/comments
will only work if your page is loaded http and not https
will work only if the remote API supports https
will only always work properly if the remote API supports both http and https
The other issue is regarding the format of the sent data
The default content-type for $.ajax POST is application/x-www-form-urlencoded; charset=UTF-8
So, sending a POST request with various combinations of contentType and data shows the following
Firstly, without setting contentType
data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'
request is sent as formData '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'
data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},
request is sent as formdata, the following values:
value1: 2.0
value2: setPowerState
value3[state]: 0
looks better, because there's actually multiple values, not just a string
Now, let's set contentType
contentType: 'json', data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},
firefox does not tell me the format of the following string: 'value1=2.0&value2=setPowerState&value3%5Bstate%5D=0' - looks useless
And finally
contentType: 'json', data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
sends the following JSON: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'
So, finally, if the API requires JSON request data, and it's actually on a domain called "host.com"
$.ajax({
type: "POST",
url: "//host.com/api/comments",
dataType: 'json',
contentType: 'json', data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
});
I am creating a site in which user can create popup on one site and then take small code to used on other site . Problem is when i am made ajax call from other site to fetch data in others site database i am getting error "No cross origin access allowed".When i am using jsonp it is giving me correct response but i am not able to collect it. It is giving me error"Unexpected token". I am using jquery ajax if you have any other idea then let me know i will implement it also. Here is my code :
$.ajax({
url: "url",
// Tell jQuery we're expecting JSONP
dataType: "jsonp",
jsonpCallback: 'callback',
type: 'GET',
data: {
format: "json"
},
// Work with the response
success: function( response ) {
console.log( response ); // server response
}
});
If Your response has error server side Cross domain issue then your server side response should exist Access-Controll-Allow-Origin with * value will solve your problem.
You can try that:
crossDomain : true,
$.ajax({
url: "url",
// Tell jQuery we're expecting JSONP
dataType: "jsonp",
jsonpCallback: 'callback',
crossDomain : true,
type: 'GET',
data: {
format: "json"
},
// Work with the response
success: function( response ) {
console.log( response ); // server response
}
});
It solved my problem here.
I have a problem with getting number of shares of my custom url. Im trying this code:
$.ajax({
type: "POST",
url: "http://graph.facebook.com/https://www.myurl.com/somelink/?callback=?",
processData: true,
contentType: 'application/json',
success: function(r){
var fbjson = JSON.stringify(r);
console.log(fbjson);
}
});
I've tried also:
$.getJSON('http://graph.facebook.com/https://www.myurl.com/somelink/?callback=?'), function (data) {
fbjson = JSON.stringify(fbjson);
console.log(fbjson);
};
When I paste url into browser I recieving JSON with all needed information, but when I am using $.ajax etc. I am recieving totaly different json or some error that I should use XMLHttpRequest or some other serwer status information. Important knowladge may be that I am using https://.
Anyone know how to correctly get FB share count for custom URL ?
PS Be understanding for me, this are my first steps in JS, thanks :)
For the json might be cooke issue. your browser have cookie for that URL but in ajax you need to pass that cookie !
Why you are counting share count manually ?
There is lots of share tools is available for fee !
example : http://js-socials.com/
I think this plugin will give you what you need !
Thanks
I've solve it. This script work correctly ;)
(function fbcount() {
var token = 'token here',
url = 'url here';
$.ajax({
url: 'https://graph.facebook.com/v2.7/',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, id: url},
success: function(data){
$('.facebook-scount').append(data.share.share_count);
},
error: function(data){
}
});
})();
Thanks!
I have developed WCF rest service and deployed it on a link that can be accessed via the browser because its action is "GET".
I want to get that data using jQuery. I tried my best to get WCf get response using jQuery
but in vain. I also tried $.Ajax with 'jsonp' with no luck. Can any one help me?
The url is: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation
You can check that url response by pasting url in browser.
You need to set Access-Control-Allow-Origin to value [*] in your response header.
this blog gives the more details how it can be done in WCF REST service
if you were to do this in Web API you could have just added
Response.Headers.Add("Access-Control-Allow-Origin", "*")
calling the service using a fiddle
$(function() {
$.ajax({
url: "http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation",
datatype: 'json',
type : 'get',
success: function(data) {
debugger;
var obj = data;
}
});
});
I got the error
XMLHttpRequest cannot load
http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation.
Origin http://fiddle.jshell.net is not allowed by
Access-Control-Allow-Origin.
I can't make a cross domain example to show you but
$('#a').load('http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation?callback=run');
would work had those things been set.
Your service needs to either enable JSONP callbacks or set the Access-Control-Allow-Origin header for cross domain requests to work, or you need to run the script from the same domain. Given that your url says AndroidApp I'm thinking you want cross domain.
Sample code below:
$.ajax
(
{
type: 'GET',
url: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation,
cache: false,
async: true,
dataType: 'json',
success: function (response, type, xhr)
{
window.alert(response);
},
error: function (xhr)
{
window.alert('error: ' + xhr.statusText);
}
}
);