使用 AJAX 和 JSON 从数据库中获取和显示数据时，innerHTML 中未定义答案

【问题标题】：Getting undefined in innerHTML when fetching and displaying data from database using AJAX and JSON使用 AJAX 和 JSON 从数据库中获取和显示数据时，innerHTML 中未定义
【发布时间】：2013-12-28 18:19:06
【问题描述】：

这是我为使用 AJAX 从数据库中获取数据而编写的脚本。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadJSON()
{
   var data_file = "http://www.idesigns.com.pk/comingsoon/test/connect.php";
   var xmlhttp;
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=function()
   {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
             var jsonObj = xmlhttp.responseText;
             document.getElementById("firstname").innerHTML =  jsonObj.firstname;
             document.getElementById("lastname").innerHTML = jsonObj.lastname; 
             document.getElementById("ajaxDiv").innerHTML=jsonObj;

        }
   }

   xmlhttp.open("GET", data_file, true);
   xmlhttp.send();
}
</script>
<title>JSON</title>
</head>
<body>
<h1>User Details</h1>
<p id="firstname">John</p>
<p id="lastname">Doe</p>
<div id='ajaxDiv'>Your result will display here</div>
<button type="button" onclick="loadJSON()">Update Details </button>
</body>
</html>

数据库连接没有错误。
获取和/或 JSON 对象的回显没有错误。
但是当我尝试使用 innerHTML 显示数据时，我得到了以下未定义的输出，而不是从对象中获取名字和姓氏。

输出：

undefined

undefined

{"id":"1","firstname":"Bruce","lastname":"Lee"}

我不知道发生了什么。那么，如果有人可以提供帮助？请

【问题讨论】：

打印jsonObj会得到什么？
这就是我得到的 {"id":"1","firstname":"Bruce","lastname":"Lee"}
@AkshatSinghal：它确实在那里，你必须仔细观察才能看到它。 :-) 森马的编辑有所帮助。

标签： javascript ajax json

【解决方案1】：

您正在尝试使用字符串，就好像它是一个反序列化的对象。该字符串没有名为firstname 和lastname 的属性。

你需要将字符串解码成一个对象：

var jsonObj = JSON.parse(xmlhttp.responseText);

然后您的代码使用jsonObj.firstname 等将起作用。（请注意，在这一点上，它不是“JSON 对象”。它只是一个对象。JSON 是一种文本表示法；一旦文本被解析，你'不再处理 JSON。）

【讨论】：

如果我使用
var jsonObj = JSON.parse(xmlhttp.responseText);然后我在控制台中收到此错误。
XMLHttpRequest 无法加载 idesigns.com.pk/comingsoon/test/connect.php。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'idesigns.com.pk' 是不允许访问的。
它什么也没做。
我在 google chrome 控制台中出现错误的原因是地址栏中的 URL 中缺少 (www.)。
@MuhammadAftab：最好使用 JSON.parse 后备，即 5、6。github.com/douglascrockford/JSON-js

【解决方案2】：

您需要先解析 JSON。你的responseText 只是一个很大的字符串，所以当你尝试访问像responseText.firstname 这样的属性时，它会返回为undefined，因为字符串没有firstname 属性。使用这个：

var jsonObj = JSON.parse( xmlhttp.responseText );

现在jsonObj 应该是一个对象，而不是字符串，其属性对应于您的服务器发送的数据。

【讨论】：

如果我使用
var jsonObj = JSON.parse(xmlhttp.responseText);然后我在控制台中收到此错误。
XMLHttpRequest 无法加载 idesigns.com.pk/comingsoon/test/connect.php。请求的资源上不存在“Access-Control-Allow-Origin”标头。起源'idesigns.com.pk'；因此不允许访问。
而且它什么也不做。
我在 google chrome 控制台中出现错误的原因是地址栏中的 URL 中缺少 (www.)。

【解决方案3】：

添加

xmlhttp.responseType = "json"

并相应地更改您的代码。当它是 JSON 对象时，不要将您的响应视为文本

【讨论】：