CODEWITHSUNDEEP
jqueryjson
jumpjack
jumpjack

Reputation: 990

How to retrieve JSON data from server using jQuery?

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.

Upvotes: 0

Views: 748

Answers (3)

jumpjack
jumpjack

Reputation: 990

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>

Upvotes: 0

Tom
Tom

Reputation: 74

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

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

Upvotes: 1

Pratik Bhajankar
Pratik Bhajankar

Reputation: 1154

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>

Upvotes: 2

Related Questions