Get jSON data from other URL using AJAX

Question

I am trying to GET jSON data from external link using AJAX and for reason its not printing the output. I tried looking into many questions and tried in the following ways and none worked for me.

Test 1

$.ajax({
    "url":"http://20percents.com/created_by_mohan/testAll.php",
    "type":"GET",
    "data": { fields: "title" },
    "dataType":"jsonp",
    "contentType":"application/json",
    "jsonpCallback":"myCallback",
    "success":function(data){
        console.log(data);
        alert(data.title);
    }               
})

Test 2

$.ajax({
  url: 'http://20percents.com/created_by_mohan/testAll.php',
  type: 'GET',
  data:  { fields: "title" },
  success: function(data) {
    //called when successful
    $('body').html(data);
  },
  error: function(e) {
  }
});

Test 3

var mydata;
$.ajax({
   url: 'http://20percents.com/created_by_mohan/testAll.php',
   dataType: 'json',
   success: function(data) {
      mydata = data; 
      console.log(mydata);
   }
});

Test 4

$.ajax({
type:"GET", 
    url: "http://20percents.com/created_by_mohan/testAll.php", 
    success: function(data) {
            $("body").append(JSON.stringify(data));
        }, 
    error: function(jqXHR, textStatus, errorThrown) {
            alert(jqXHR.status);
        },
   dataType: "jsonp"
});

I need to get some data for instance title, storeid, store-cuisines for now. How can I make this working?

Thanks

Are you sure that the remote endpoint supports JSONP? Or CORS? Otherwise you won't be able to call it due to the same origin policy restriction that's built into the browsers. You may take a look at the console of the browser. Usually such errors will be shown there. — Darin Dimitrov
– Darin Dimitrov, Commented Jan 2, 2015 at 18:14
Run your script in jsfiddle and open up the console tab in chrome debug tool. You will see the error: XMLHttpRequest cannot load 20percents.com/created_by_mohan/testAll.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'fiddle.jshell.net' is therefore not allowed access. Fix that first. Follow @Darin's suggestion as well. — Maz
– Maz, Commented Jan 2, 2015 at 18:20

Hoja · Accepted Answer · 2015-01-02 18:13:18Z

1

First you try the type of ajax data

 dataType: 'json'

If it didnt work then try post method with any security token.[or dummy post value] You could use this.

JQuery

 $.ajax({
    type: "GET",
    url: 'test.php',
    dataType: 'json',

    success: function(response){
        console.table([response]);
    }
 });

If you've a json file you could read it using php fn. and echo it.

answered Jan 2, 2015 at 18:13

Hoja

1,2371 gold badge15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Karthik Malla Over a year ago

I don't know how this gonna work. I am looking for getting data and decoding it whereas you are proposing to post data and encode it.

Hoja Over a year ago

Apologise I've edited the answer. Can you please try?.

Maz Over a year ago

@hoja.M.A : Please create a jsfiddle for this type of answers , Your answer is too generic and doesn't answer the question.

Karthik Malla Over a year ago

This is half answer, it would be great if you can make a fiddle. Thanks

guest271314 · Accepted Answer · 2015-01-02 21:08:40Z

Try

var url = "http://20percents.com/created_by_mohan/testAll.php?"
, data = {"fields":"titles"}
, results = $("#results")
, request = function(url, data) {
    results.text("requesting " + data.fields + "...");
    return $.getJSON("https://query.yahooapis.com/v1/public/yql?q="
      + "select * from json where url='" + url + $.param(data) + "'"
      + "&format=json&callback=")
};
request(url, data)
.then(function(data) {
  console.log(data)
  results.text(JSON.stringify(data.query.results.json.data, null, 4))
}, function(err) {
  console.log(err)
});

See Working with JSONP

var url = "http://20percents.com/created_by_mohan/testAll.php?"
, data = {"fields":"titles"}
, results = $("#results")
, request = function(url, data) {
  results.text("requesting " + data.fields + "...");
return $.getJSON("https://query.yahooapis.com/v1/public/yql?q="
  + "select * from json where url='" + url + $.param(data) +"'"
  + "&format=json&callback=")
};
request(url, data)
.then(function(data) {
  console.log(data)
  results.text(JSON.stringify(data.query.results.json.data, null, 4))
}, function(err) {
  console.log(err)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="results"></pre>

Collectives™ on Stack Overflow

Get jSON data from other URL using AJAX

2 Answers 2

First you try the type of ajax data

JQuery

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

First you try the type of ajax data

JQuery

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related