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

【问题标题】：Why response data from AJAX request comes in error and not success?为什么来自 AJAX 请求的响应数据出错而不成功？
【发布时间】：2021-01-17 09:10:55
【问题描述】：

我有一些 JSON 数据存储在 https://jsonblob.com，它允许通过一些唯一的 url 访问 JSON 数据。
所以下面是我唯一的网址。
https://jsonblob.com/12a5fd37-03ee-11eb-909d-574de81f75ed
上述网址中的 JSON 数据为：

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

现在，我使用 jQuery AJAX 调用来检索 JSON 数据，如下所示。

$.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);
    }
});

我有 3 个主要问题：

为什么我的代码进入 error 函数而不是 success 功能？
即使我的代码进入错误函数，我仍然可以看到我的 data.responseText 中的 JSON 数据？
如何检索 JSON 来自误差函数的数据？

同样在下面我添加了相同的 sn-p:

$(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>

我尝试检查下面的帖子，但找不到任何帮助。
ajax response comes through both success and error method

提前感谢您的帮助。

【问题讨论】：

很明显，https://jsonblob.com/12a5fd37-03ee-11eb-909d-574de81f75ed 不是返回 json，而是返回 html...
你需要使用https://jsonblob.com/api/12a5fd37-03ee-11eb-909d-574de81f75ed。
您只是使用了错误的 api 来获取 json，https://jsonblob.com/12a5fd37-03ee-11eb-909d-574de81f75ed 从页面返回所有 html，它不会从该 html 页面获取 JSON。

标签： javascript jquery json ajax response

【解决方案1】：

您请求的网址正在发送 HTML。因为您将 application/json 指定为内容类型，所以将 HTML 作为响应将是错误的。

试试吧：

$.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);
    }
});

向他们的 REST api 发送一个请求（注意 URL 中的 /api/），它应该返回 JSON。

【讨论】：