JQuery Ajax call from json getting error

Question

Please help me I am new to ajax calling from json, I could get the data from json, please look from below code.

Can we call from local server how its worked,

Please give bit clear picture

In chrome console error :

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?q=%2C. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8012' is therefore not allowed access. The response had HTTP status code 401.

code:

 <!DOCTYPE html>
    <html>
    <script src="http://localhost:8012/js/jquery.min.js"></script>
    <body>
    <div> city : <input type="text" id="txtCity"></div><br/>
    <div> Country : <input type="text" id="txtCountry"></div><br/>
    <input type="button" value="Get weather" id="getWeather">
    <div id="#resultDiv"></div>
    <script>
        $(document).ready(function() {
        $("#getWeather").click(function() {

            var requestData = $("#txtCity").val() + ',' + $("#txtCountry").val();
            var resultElement = $("#resultDiv");

                $.ajax({
                        url: 'http://api.openweathermap.org/data/2.5/weather',

                        method: 'get',
                        data: {
                            q: requestData
                        },
                        dataType: 'json',
                        success: function(data) {
                            resultElement.html('weather: ' + data.weather[0].main + '<br/>' +
                                'Description: ' + data.weather[0].description);
                    }

                });

    //alert("test");

        });

    });
    </script>
    </body>
    </html>

http://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working check — Parth Trivedi, Dec 15 '15 at 17:27
Hi Parth Trivedi Thanks for you help that issue resolved :) but another issue in browser console ....... http://api.openweathermap.org/data/2.5/weather?callback=jQuery1113042950639056376505_1450200840637&q=london%2CUK&_=1450200840638 — Srinivas Senapathi, Dec 15 '15 at 17:36
Possible duplicate of [Cross origin request blocked](http://stackoverflow.com/questions/24663126/cross-origin-request-blocked) — Corubba, Dec 15 '15 at 19:20

AndreaScn · Answer 1 · 2015-12-19T00:18:34.100

Be sure that the server you are sending the request can accept your request. This is a summary of how CORS principle works. I read on openweathermap.org/appid that you need an API key in order to make a correct request. Here an example of API call: http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111. I suggest you to read on their site how get an API token and make a correct request.

AndreaScn · Answer 2 · 2015-12-17T20:37:49.587

-1

You need to set the 'Access-Control-Allow-Origin' header in your request.

I saw that you use dataType: 'json' try dataType: 'jsonp' and adding crossDomain: true inside your $.ajax could be enough.

If you want set the request header you can try something like

$.ajax({
    url: 'http://api.openweathermap.org/data/2.5/weather',
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    },
    method: 'get',
    data: { q: requestData},
    dataType: 'json',
    success: function(data) {
    resultElement.html('weather: ' + data.weather[0].main + '<br/>' + 'Description: ' + data.weather[0].description);}
});

edited Dec 17 '15 at 20:37

answered Dec 15 '15 at 17:53

AndreaScn

83
1
9

Hi AndreaScn that for help when i run console method : getting error "Uncaught SyntaxError: Unexpected identifier" at method:get – Srinivas Senapathi Dec 15 '15 at 18:31
My fault, I forgot a comma after the `beforeSend` function. I just fixed the code :) – AndreaScn Dec 17 '15 at 20:37
jquery.js:8691 GET http://api.openweathermap.org/data/2.5/weather?callback=jQuery21103419981733264881_1450459890788&q=london%2CUK&_=1450459890790 send @ jquery.js:8691n.extend.ajax @ jquery.js:8152(anonymous function) @ (index):16n.event.dispatch @ jquery.js:4409r.handle @ jquery.js:4095 – Srinivas Senapathi Dec 18 '15 at 17:24
@epascarello obviously but if the server is set to accept all (or a part of them) entry connections (and I thought this use case when I answered, like a public API or a web service) you need to set the right header on the request in order to have the request accepted. This was the intent, and please correct me if I said something wrong. – AndreaScn Dec 18 '15 at 23:57

JQuery Ajax call from json getting error

2 Answers2