从网站获取JSON并导入Javascript

Question

I am trying to get some JSON data from the Guardian api, like from http://content.guardianapis.com/search?q=Tim%20Farron%20mp&page-size=3&format=json this example - by using a php program i have written. When run on its own from the data my javascript sends it the data ispresented normally as seen above, however when the javascript runs it is not getting anything back from the php - the code gets stuck.

PHP (working) code:

<?php
//gets url from passed over value
$url = urldecode($_GET['url']);
//gets  contents of url
$results = file_get_contents($url);
header('content-type: text/json');
echo $results;

This is the part of my javascript which is not working - no response is returned as it gets stuck on the first line.

$.getJSON('getSTORY.php?url='+ url2, function(response) {
 console.log(response);
 });

In the console this is an error message which is returned ( i think!)

XHR finished loading: "http://yrs2013.bugs3.com/mpapp/getSTORY.php?url=http%3A%2F%2Fcontent.guardianapis.com%2Fsearch%3Fq%3DTim%20Farron%20mp%26page-size%3D3%26format%3Djson". jquery.js:6
//^above was the link using the php. when pressed this shows the required JSON code
send jquery.js:6
x.extend.ajax jquery.js:6
x.(anonymous function) jquery.js:6
x.extend.getJSON jquery.js:6
(anonymous function) script.js:57
c jquery.js:4
p.fireWith jquery.js:4
k jquery.js:6
r

I would like to know why the program is getting stuck and how to solve it, and also how to pass the variable back from php into javascript! I am very new to all this so thanks in advance! :)

Answer 1

Your code should work just fine but use this as reference:

$(function() {

    $('#test').bind('click', function(ev) {
        var url2="http://content.guardianapis.com/search?q=Tim%20Farron%20mp&page-size=3&format=json";
        $.getJSON('test.php?url='+ url2, function(response) {
            console.log(response);
            $("#results").text(""+JSON.stringify(response));
            if(response.response.status == "ok"){
                $("#results").text("");
                $.each(response.response.results, function(index, element) {
                    $("#results").append($('<div>', {
                        text: "Section: " + element.sectionName
                    }));
                    $("#results").append($('<div>', {
                        text: "Title: " + element.webTitle
                    }));
                    $("#results").append($('<hr>'));
                });
                $("#results").show();
            }
        });
    });
});

    <form>
        <input type="button" name="test" id="test" value="test">
    </form>
    <div id="results">
    </div>

Answer 2

So your problem most likely is that your json response is invalid due to an output of $url which is not present in the above code. So please for the future: Don't remove too much code for posting it in the question, also if it's just code for debugging purpose.

Remove every output before and after echo $results;

What you should change too, is the content-type of json which is application/json :

header('content-type: application/json');

Then for checking if the response can be handled by the JSON parser you can use jsonlint which validates the json.