Question

该项目涉及科学论文和引文数据库。我正确地实现了一些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”）。innerHTML但这根本不起作用。我甚至试图将它设置为如下字符串：document.getElementById（“journal”）。innerHTML =“test”;并且网页上没有显示任何内容。我也尝试过这个测试：

HTML：

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

JAVASCRIPT：

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

我得到一个警告框，上面写着“未定义”

如何才能获得此document.getElementById？或者，您是否建议使用其他方法在网页上解析和显示json数据？也许是以无边框表格式？

谢谢！

Answer 1

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

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

Answer 2

确保在加载DOM后运行Javascript：

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

普通JS：

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

Answer 3

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

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

Answer 4

试试这个：

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

DEMO here.

Answer 5

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

＆＃34;测试标题＆＃34;正如您所见，正确写入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)"}];

网页在查阅论文后显示：
标题：测试标题
作者：未定义的发布日期：undefined
期刊：undefined

在HTML页面上显示JSON数据

5 个答案: