时间戳

首页 > 解决方案 > 为什么来自 AJAX 请求的响应数据出错而不成功？

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

问题描述

我在https://jsonblob.com上存储了一些 JSON 数据，允许通过一些唯一的 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 个主要问题：

  1. 为什么我的代码进入错误函数而不是成功 函数？
  2. 即使我的代码进入错误函数，我仍然可以在data.responseText中看到我的 JSON 数据？
  3. 如何从错误函数中检索JSON 数据？

    同样在下面我添加了相同的片段：

$(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 响应来自成功和错误方法

提前感谢您的帮助。

标签： javascriptjqueryjsonajaxresponse

解决方案

您请求的 url 正在发送 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（/api/URL 中的注释）发送一个请求，该请求应该返回 JSON。

推荐阅读