CODEWITHSUNDEEP
javascriptjqueryhtmlapi
The Doctor
The Doctor

Reputation: 11

Javascript can't communicate with API

I am attempting to write a webform that will take a city and state from the user, pass them into the url to the API, and then put the high and the low out to the form.

Currently if i debug it in IE i hit the error in the ajax and it shows an alert that says failure 404, but if I debug in firefox I see a 304 response if I look at firebug.

I have run my ajax call through jsfiddle and it gives back in alerts the correct data. So I dont think the problem is the ajax itself. I have added the rest of my javascript and my HTML to jsfiddle and I run it and when I hit my submit button I get a flash of my failure alert and jsfiddle says "error: Please use POST request.". If I do that it still does the same thing so I am lost.

Any help in getting this to run would be great. Here is my code as of now.

HTML:

<body>
    <form id="weatherForm">
        City:<input type="text" id="City" /><br />
        State:<input type="text" id="State" /><br />
        High:<p id="High"></p><br />
        Low:<p id="Low"></p><br />
        <button id="btnSubmit">Submit</button>
    </form>
 </body>

Javascript:

$(document).ready(function () {
     $('#btnSubmit').on('click', findTemps)
});

function findTemps() {
    var city = $('#City').val();
    var state = $('#State').val();
    var fullUrl = 'http://api.wunderground.com/api/(Key here)/history_20140303/q/' + state + '/' + city + '.json';

    $.ajax({
        url: fullUrl,
        dataType: 'jsonp',
        type: 'POST',
        success: function (parsed_json) {
            var High = parsed_json.history.dailysummary[0].maxtempi;
            $('#High').val() = High;
            var Low = parsed_json.history.dailysummary[0].mintempi;
            $('#Low').val() = Low;
            alert("High in " + city + ", " + state + " is " + High);
            alert("Low in " + city + ", " + state + " is " + Low);
        },
        error: function (e) {
            alert('Failure ' + e.status);
        },
        done: function () {
            alert('done');
        }
     });
}

Upvotes: 0

Views: 341

Answers (3)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Because it is a cross domain request. Browser will prevent it due to Same Origin Policy.

If you want to use cross domain ajax, there should enable cors in ajax. Also server also should enable it.

Also that url doesnt look like supporting jsonp.

There is another method for doing cross domain ajax. Make your server as a proxy. Ie, there will be a method in your server which fetches the data from other domain using http post.. you will create calls to your server method only. It will make the call to cross domain and return the data..

Upvotes: 2

Polynomial
Polynomial

Reputation: 28316

You're attempting to perform a cross-domain AJAX request, which is blocked by most browsers' security policies. This is because such requests can be used to perform actions on other sites without the user noticing.

The way around this is to utilise Cross Origin Resource Sharing (CORS) on the remote server, such that it allows resource sharing to the source domain from which the AJAX request occurs.

Upvotes: 0

Pierce
Pierce

Reputation: 325

There are two things that catch my eye here.

1) There's a chance that you're running into CORS-related problems with the cross-domain AJAX request.

2) The dataType attribute should probably be json instead of jsonp.

Upvotes: 0

Related Questions