Javascript 在HTML页面上显示JSON数据_Javascript_Html

Javascript 在HTML页面上显示JSON数据

javascript html

Javascript 在HTML页面上显示JSON数据,javascript,html,Javascript,Html,这个项目正在处理科学论文和引文数据库。我正确地实现了一些PHP，使用用户输入（DOI）搜索数据库并将数据传递给javascript。javascript获取的数据如下所示： function getMETA() { var json = <?php echo json_encode($data); ?>; } 这个数据库查询只包含所选论文的元数据，我只想在网页上显示它。这就是我所尝试的： Title: <span id="ti

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

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

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

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正常工作？或者您是否推荐另一种方法来解析和显示网页上的json数据？也许是无边框的表格格式

谢谢

这是因为

document.getElementById（“title”）.innerHTML

正在返回一个字符串。它没有value属性

确保在加载DOM后运行Javascript：

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

普通JS：

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

您可能试图在实际可用之前查询

#title

。要确保在请求时返回对所要查找的DOM元素的引用，请在处理程序中执行代码：

试试这个：

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

$。每个（json[0]，函数（f，v）{
$（“正文”）。追加（“+f+”：“+v+”）；
})

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 />

该网页在查找论文后显示：
标题：测试标题
作者：未定义
发布日期：未定义

Journal:undefined

JSON与该文档无关。getElementById问题。你能不能制作一把小提琴给我们演示一下。@wumm的意思是

。value

只用于

元素

.innerHTML

本身应该包含文本。document.getElementById（“title”）是否返回

未定义的？如果是这样，则需要等待DOM准备就绪。在DOMContentLoaded
处理程序中运行代码。他说他想知道这是否返回空字符串？但是为什么不是document.getElementById（“journal”）.innerHTML=“test”？我说的是问题的最后一部分，上面写着TEST
。（我知道，…innerHTML.value；
是nonesene）这个主要问题是，我明白了，为什么document.getElementById（“journal”）.innerHTML=“test”工作。他使用的是纯javascript而不是jquery@wumm标记了jquery，顺便说一下，关于不返回测试，您是对的（我误解了这个问题）。很抱歉我想这是因为这个愚蠢的标签建议功能。@wumm我添加了一个简单的JS解决方案。我不知道，所以强迫人们使用不合适的标签。我说的是建议功能，不是吗？有些用户可能会点击这个，有时会有奇怪的建议。再说一次，他没有使用jquery！只是简单的javascript！这对我来说非常有用，因为我能够写入在脚本之后加载的HTML页面元素。现在，我如何传递json变量并对其进行解析以仅获取所需的对象？
window.onload = function() {
    document.getElementById("title").innerHTML = "test";
};

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

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

<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 />

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)"}];