CODEWITHSUNDEEP
javascriptjqueryjsonajaxresponse
foodiepanda
foodiepanda

Reputation: 138

Why response data from AJAX request comes in error and not success?

I have some JSON data stored at https://jsonblob.com that allows accessing JSON data through some unique url.
So below is my unique url.
https://jsonblob.com/12a5fd37-03ee-11eb-909d-574de81f75ed
JSON data in above url is:

{
  "glossary": {
    "title": "Suyog",
    "GlossDiv": {
      "title": "S",
      "GlossList": {
        "GlossEntry": {
          "ID": "12345",
          "GlossDef": {
            "para": "This is my data 123456",
            "GlossSeeAlso": [
              "GML",
              "XML"
            ]
          },
          "GlossSee": "Foobar"
        }
      }
    }
  }
}

Now, I have used jQuery AJAX call to retrieve the JSON data as below.

$.ajax({
    url: "https://jsonblob.com/cc73f020-03eb-11eb-909d-095d7b5c02dd",
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json',
    processData: false,
    success: function (data) {
      console.log("Success: " + data.responseText);
    },
    error: function(data){
      console.log("Error: "+data.responseText);
    }
});

I have 3 main queries:

  1. Why does my code goes into error function and not success function?
  2. Even if my code goes in error function, I can still see my JSON data in data.responseText?
  3. How can I retrieve the JSON data from error function?

    Also below I have added same snippet:

$(document).ready(function() {
    $("#url").val("https://jsonblob.com/12a5fd37-03ee-11eb-909d-574de81f75ed");
  });


$("#go").click(function() {
  $("#res1").html("<b>Please wait....Fetching data</b>");
  $("#res2").text("\n\n\nPlease wait....Fetching data");

  $.ajax({
    url: $("#url").val(),
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json',
    processData: false,

    success: function(data) {
      console.log("Success: " + data.responseText);
      $("#res1").html("<b style='color:darkgreen;'>Success</b>\n" + data.responseText);
      $("#res2").text("Success\n" + data.responseText);
    },

    error: function(data) {
      console.log("Error: " + data.responseText);
      $("#res1").html("<b style='color:red;'>Error</b>\n" + data.responseText);
      $("#res2").text("Error\n" + data.responseText);
    }

  });
});


$("#reset").click(function(){
    $("#res1").html("");
    $("#res2").text("");
});
body {
  text-align: center;
  padding: 5px;
}

#url {
  padding: 5px;
  margin-top: 20px;
}

#go,#reset {
  font-weight: bold;
  padding: 5px;
  border: 1px solid;
  border-radius: 4px;
  top: 20px;
  position: relative;
    cursor:pointer;
    background:grey;
    color:white;
}

#res1 {
  border: 1px solid;
  top: 20px;
  position: relative;
  height: 150px !important;
  max-height: 150px !important;
    overflow:scroll;
  padding: 5px;
}

#res2 {
  border: 1px solid;
  top: 20px;
  position: relative;
  height: 150px !important;
  max-height: 150px !important;
    overflow:scroll;
  padding: 5px;
}

span{
    top:20px;
    position:relative;
    font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <input id="url" type="text" size="70" />
    <br />
    <span id="go">Fetch data</span>
    <span id="reset">Reset data</span>
    <br />
    <br />
    <span>Response through AJAX(HTML)</span>
    <div id="res1"></div>
    <br />
    <span>Response through AJAX(Text)<label style='background:yellow;'>This has my JSON data(Search "Suyog")</label></span>
    <div id="res2"></div>
</div>

I tried checking below post, but could not find any help.
ajax response comes through both success and error method

Thanks in advance for your help.

Upvotes: 0

Views: 1374

Answers (1)

Raphael Serota
Raphael Serota

Reputation: 2197

The url that you're requesting is sending HTML. Because you specified application/json as the content type, getting HTML as the response would be an error.

Try instead:

$.ajax({
    url: "https://jsonblob.com/api/cc73f020-03eb-11eb-909d-095d7b5c02dd",
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json',
    processData: false,
    success: function (data) {
      console.log("Success: " + data.responseText);
    },
    error: function(data){
      console.log("Error: "+data.responseText);
    }
});

That sends a request to their REST api (note /api/ in the URL), which should return JSON.

Upvotes: 2

Related Questions