How to retrieve JSON data from server using jQuery?

Question

I tried several combinations of this source, but i'm new to jQuery and I can't find a basic tutorial which I can understand.

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js"></script>
    </head>
    <body>
        <script>
        var sourceText = "car";
        var transText = "";
        $.getJSON("http://www.worldlingo.com/S000.1/api?wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=" + sourceText,
                function(data){
                  alert("Data: " + data);
                    }).error(function(jqXHR, textStatus, errorThrown){
                            console.log("ERR: %o" , jqXHR);
                            console.log("Result: %s" , jqXHR.responseText);
                            transText=jqXHR.responseText;
                            alert("Translation JSON data provided for '" + sourceText + "': '" + transText + "'");
                    })
        </script>
    </body>
</html>

I want just to get the translation of a word.

Why do I get the translation as an error rather than as a result?

Why does the execution never get to alert(data) if the data are actually successfully received?

Edit: final answer is: server is NOT providing a JSON response, hence the source above is working correctly, triggering an error due to wrong MIME type received.

If you see your browser console, you should see some error like XMLHttpRequest cannot load http://www.worldlingo.com/S000.1/api?wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=car. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '....' is therefore not allowed access. — Arun P Johny
– Arun P Johny, Commented Feb 18, 2016 at 12:58
The title of your question has actually nothing to do with your question. Please fix that. — pinowthebird
– pinowthebird, Commented Feb 18, 2016 at 13:05
@Arun P Johny : I see no errors... that's the point! Indeed, the script successfully gets the result from the server! I also tried commenting out the ".error" part: still no erros in Chrome console. — jumpjack
– jumpjack, Commented Feb 18, 2016 at 14:31
I get this error in FireFox: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at worldlingo.com/S000.1/…. This can be fixed by moving the resource to the same domain or enabling CORS So I should enable this "CORS"... How?!? Why doesn't chrome complain about it and actually receives data but triggers error like if it did not? — jumpjack
– jumpjack, Commented Feb 18, 2016 at 14:38
Solution: the server I am using is NOT providing data in JSON format! For unknown reasons (i.e. I was looking for a server providing translations in JSON format...) I assumed it did! — jumpjack
– jumpjack, Commented Feb 18, 2016 at 14:50

Pratik Bhajankar · Accepted Answer · 2016-02-18 13:02:45Z

2

See i have uses on webservice which will return you json data.

There might be error in your web service or you are doing somthing wrong in code.

please check for error in your server side.

Hope so This will help you lot

 var sourceText = "car";
 var transText = "";
 $.getJSON("http://jsonplaceholder.typicode.com/posts/1",
   function(data) {
     alert("Data: " + data);
   }).error(function(jqXHR, textStatus, errorThrown) {
   console.log("ERR: %o", jqXHR);
   console.log("Result: %s", jqXHR.responseText);
   transText = jqXHR.responseText;
   alert("Translation JSON data provided for '" + sourceText + "': '" + transText + "'");
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Feb 18, 2016 at 13:02

Pratik Bhajankar

1,1542 gold badges14 silver badges29 bronze badges

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

Comments

Tom · Accepted Answer · 2016-02-18 14:37:21Z

1

Put your code between try catch, maybe it throws some errors.

try {
  /* YOUR CODE */
}
catch(error) {
    console.log(error.message);
}

answered Feb 18, 2016 at 14:37

Tom

744 bronze badges

Comments

jumpjack · Accepted Answer · 2016-02-18 15:18:31Z

The server I am using is NOT actually providing results in JSON format, but in plain text, so there is no need for $.getJSON().

Additionally, the correct URL to use is: http://www.worldlingo.com/S000.1/api?wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=WORD_TO_TRANSLATE&wl_errorstyle=1

Last parameter will prevent server from providing the "error code", which is 0 for successful requests, within the results, being instead it written into HTML header.

My final source is:

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js"></script>
        <script>
      function myCall() {
         // Status text:
         document.getElementById('progress').innerText="Please wait..."; 

            // URL of your favourite online translation API (Google is no more free):
            var URL= "http://www.worldlingo.com/S000.1/api?wl_errorstyle=1&wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=";

         // Read text to translate:
            sourceText = document.getElementById('source').value; 

            // Call  translator
            var jqxhr = $.get(URL + sourceText, function() {
                document.getElementById('result').innerText=jqxhr.responseText;
            document.getElementById('progress').innerText="Done.";
            })
            .done(function() {
             // alert( "Finished." );
            })
            .fail(function(a,b,c) {
              alert( "An error occurred while contacting server '" + URL + "': '" + c + "'");
            });
}
</script>
    </head>
    <body>
    <textarea id="source">Write your word here</textarea><br>
    <textarea id="result">Translation will appear here</textarea><br>
    <input type="submit" value="translate" onclick="javascript:myCall()"><span id="progress">-</span><br>
    </body>
</html>

Collectives™ on Stack Overflow

How to retrieve JSON data from server using jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related