我正在尝试将外部 JSON 文件拉入我的 JavaScript 代码中。我使用 https://jsonserve.com/ 创建了这个 JSON 文件,它为我提供了 URL (https://api.jsonserve.com/Xljpm)。当我使用
XMLHttpRequest
对象在 JavaScript 中调用 URL 时,我收到一条错误消息。注意:我使用的是 Visual Studio Code。当我从本地主机服务器调用包含相同 JSON 数据的文件时,一切正常。谁能告诉我这是怎么回事?
我尝试执行这段代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSON Giantess Data External</title>
</head>
<body>
<style>
#output {
background-color: blue;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
</style>
<div id="output" class="oput">Nothing</div>
<script>
var myContainer = "";
var a = new XMLHttpRequest();
a.open("GET", "https://api.jsonserve.com/Xljpml", true);
//a.open("GET","data.json",true);
a.onreadystatechange = function() {
if (this.readyState == 4) {
var obj = JSON.parse(this.responseText);
for (i = 0; i < obj.length; i++) {
console.log(obj[i]);
myContainer += obj[i].giantess + " is growing to be " + obj[i].height + "!!!" + "<br>";
} //end for loop
document.getElementById("output").innerHTML = myContainer;
console.log(obj);
} // end if
} //end function
a.send();
</script>
</body>
</html>
我收到以下错误:
AJAX_JSON.html:38 GET https://api.jsonserve.com/Xljpml 500 (anonymous) @ AJAX_JSON.html:38 VM181:1 Uncaught SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSON at JSON.parse (<anonymous>) at a.onreadystatechange (AJAX_JSON.html:29:19) a.onreadystatechange @ AJAX_JSON.html:29 XMLHttpRequest.send (async) (anonymous) @ AJAX_JSON.html:38 AJAX_JSON.html:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
从代码来看,一切都写得正确。错误 500 表示服务器内部错误。但就您而言,它很可能是无效的请求 URL。尝试在浏览器中打开您的链接,您也会收到错误 500。 我还建议您传递 Accept: application/json 标头以向服务器表明您期望 JSON (因为在您的情况下,错误发生在解析 json 时,这意味着服务器返回无效的 json,但是,大多数可能只是一个字符串。