CODEWITHSUNDEEP
javascriptjquery
user1536201
user1536201

Reputation: 15

jquery $ajax not working as expected

I Have to do a cross-domain request and fetch content from a url using $.ajax function. But the below code only displays the first alert i.e alert(myUrl), After that the execution stops.The second alert is not displayed. I don't know what is wrong with the code i have written. Can somebody tell me what i am doing wrong here?Thanks in advance.

function getContentFromUrl(){
    var myUrl="http://icant.co.uk";
    alert(myUrl);
    $.ajax({
        url: "http://query.yahooapis.com/v1/public/yql?" +
             "q=select%20*%20from%20html%20where%20url%3D%22" +
             encodeURIComponent(myUrl) + "%22&format=xml'&callback=?",
        dataType: 'json',
        data: data,
        success: function () {
            alert("***********"+data.results[0]);
            if (data.results[0]) {
                var htmlText = data.results[0];
            var jsonObject = parseAndConvertToJsonObj(htmlText);
            } else {
                document.getElementById("displayerrors").innerHTML = "Could not load the page.";
            }
        },
        error: function() {
            document.getElementById("displayerrors").innerHTML = "Could not load the page.";
        }
    });
}

Upvotes: 1

Views: 2787

Answers (4)

Charlie
Charlie

Reputation: 1332

The data here is not defined

$.ajax({
            url: "http://query.yahooapis.com/v1/public/yql?" + "q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(myUrl) + "%22&format=xml'&callback=?",
            dataType: 'json',
            data: data,

and you forget to add a param for the callback function

success: function (data) {
    ....
}

The finally code should like this

function getContentFromUrl() {
        var myUrl = "http://icant.co.uk";
        alert(myUrl);
        $.ajax({
            url: "http://query.yahooapis.com/v1/public/yql?" + "q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(myUrl) + "%22&format=xml'&callback=?",
            dataType: 'json',
            data: {},
            success: function (data) {
                alert("***********" + data.results[0]);
                if (data.results[0]) {
                    var htmlText = data.results[0];
                    var jsonObject = parseAndConvertToJsonObj(htmlText);
                } else {
                    document.getElementById("displayerrors").innerHTML = "Could not load the page.";
                }
            },
            error: function () { document.getElementById("displayerrors").innerHTML = "Could not load the page."; }
        });
    }

Upvotes: 0

Andrew White
Andrew White

Reputation: 610

I assume this is jQuery?

Try the following:

url = "http://query.yahooapis.com/v1/public/yql?" +"q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(myUrl) + "%22&format=xml'&callback=?";
getContentFromURL(url);

function getContentFromURL(url)
{
    $.get(url, function (data) {
        console.log(data);
    });
}

If it dumps out to the console a response, you can build from there.

Upvotes: 1

jeff
jeff

Reputation: 8348

You can't use regular JSON for cross-domain requests because of the same-origin policy. Instead, you'll need to use JSONP. In jQuery, you can do so like this:

$.ajax({
    dataType: 'jsonp',
    crossDomain: true
    // other info
});

Note that there are security issues involved with JSONP. Only use JSONP if you trust the host domain.

Upvotes: 1

Ram
Ram

Reputation: 144739

Same Origin Policy:

The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.

Upvotes: 6

Related Questions