为什么来自 AJAX 请求的响应数据出错而不成功？

Question

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.

Answer 1

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.