在HTML页面上显示JSON数据

Display JSON data on HTML page

本文关键字：显示 JSON 数据 HTML      更新时间：2023-09-26

该项目涉及科学论文和引文数据库。我正确地实现了一些PHP，使用用户输入（DOI）搜索我们的数据库并将数据传递给javascript。javascript获取的数据如下：

function getMETA() {
    var json = <?php echo json_encode($data); ?>;                    
}

使用带有onClick="getMETA（）"的HTML表单，变量会正确地填充数据，下面是一个示例：

var json = [{"doi":"10.1103'/PhysRevB.79.054101","pub_date":"2009-02-02","journal":"Phys. Rev. B","title":"Absence of superconductivity in the high-pressure polymorph of MgB_{2}","authors":"Y. Ma, Y. Wang, and A. R. Oganov","metainfo":"79, 054101 (2009)"}];

这个数据库查询只包含所选论文的元数据，我只想在网页上显示它。这就是我尝试的：

Title: <span id="title"></span><br />
Authors: <span id="authors"></span><br />
Publish Date: <span id="pubdate"></span><br />
Journal: <span id="journal"></span><br />

然后我使用了document.getElementById（"journal"）.inerHTML，但这根本不起作用。我甚至试着把它设置成这样的字符串：document.getElementById（"journal"）.innerHTML="test"；并且网页上不显示任何内容。我也试过这个作为测试：

HTML:

<span id="title">TEST</span>

JAVASCRIPT:

  var val = document.getElementById("title").innerHTML.value
  alert(val);

我收到一个警告框，上面写着"未定义"

如何使此文档.getElementById正常工作？或者你推荐另一种方法来解析和显示网页上的json数据？也许是无边框表格格式？

谢谢！

您可能试图在#title实际可用之前查询它。为了确保在请求时返回对您要查找的DOM元素的引用，请在DOMContentLoaded处理程序中执行代码：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('title').innerHTML = 'test';
});

确保在加载DOM后运行Javascript：

$(document).ready(function() {
    $("#title").text("test");
});

普通JS:

window.onload = function() {
    document.getElementById("title").innerHTML = "test";
};

这可能是因为document.getElementById("title").innerHTML正在返回一个字符串。它没有value属性。

http://jsfiddle.net/UAQFJ/1/

试试这个：

$.each(json[0],function(f,v){    
    $("body").append("<div class='row'><span class='field'>"+f+": </span><span class='value'>"+v+"</span></div>");
})

此处演示

http://jsfiddle.net/KkgS7/

jsfiddle显示了我目前拥有的东西。以下是我的HTML页面上订单的完整代码：

<script type="text/javascript">
    function getMETA() {                
        var json = <?php echo json_encode($data); ?>;
    }
    document.addEventListener('DOMContentLoaded', function(json) {
            document.getElementById("title").innerHTML = "test title";
            document.getElementById("authors").innerHTML = json[0];
            document.getElementById("pubdate").innerHTML = json[0];
            document.getElementById("journal").innerHTML = json[0];
    });
</script>
</head>
<body>
<h1>PRAEDICIT</h1>
<h2>How successful your paper will be?</h2>
<form name="inputdoi" id="doi_input" action="" method="post">
<input name="doi_input" id="searchfield" placeholder="Search by DOI" /> 
<input type="submit" id="button" name="submit" value="Look Up" onclick="getMETA()" />
</form><br><br>
Title: <span id="title">test title</span><br />
Authors: <span id="authors"></span><br />
Publish Date: <span id="pubdate"></span><br />
Journal: <span id="journal"></span><br />

正如您所看到的，"测试标题"正确地写入HTML。我知道json[0]不是从json数据中获取对象的正确方法，这是我无法理解的最后一步。

我能把getMETA中的json变量传递给新函数吗？假设json变量看起来像第一篇文章中的示例：

var json = [{"doi":"10.1103'/PhysRevB.79.054101","pub_date":"2009-02-02","journal":"Phys. Rev. B","title":"Absence of superconductivity in the high-pressure polymorph of MgB_{2}","authors":"Y. Ma, Y. Wang, and A. R. Oganov","metainfo":"79, 054101 (2009)"}];

网页在查找论文后显示以下内容：
标题：测试标题
作者：未定义
发布日期：未定义
日记账：未定义

相关文章：