0

我有这个函数，我正在调用它来检索一些 JSON 数据并使用它来填充我页面的各个部分。js 是一个单独的 JS 文件。

$(document).ready(function(){
$.getJSON('data.json', function(data) {

    var pg_title=data.metadata.title;
    $(document).ready(function (){
        document.title = pg_title;
        document.getElementById("page_title").innerHTML=pg_title;
    });

    for (var i in data.sections) {
        var section_title=data.sections[i].title;
        var section_content=data.sections[i].content;
        var section_id=data.sections[i].title;
            var lastChar = section_id.indexOf(' ');
        section_id = section_id.slice(0,lastChar).toLowerCase();
        document.getElementById("sections").innerHTML+="<h2 id='" + section_id + "'>" + section_title + "</h2>" + "<p>" + section_content + "</p>";
    }

});
});

我从我的 HTML 中调用它，如下所示：

<script src="/design-library/js/getJSON.js" type="text/javascript"></script>

如何编辑设置以便我可以 (a) 使用成对的文件名（例如cabinet.html 和cabinet.json）或(b) 将json 文件名作为HTML 文件中的参数传递给函数？

4

3 回答 3

2

您可以将代码包装在一个函数中，如下所示：

function SomeFunctionName(jsonName)
{
    $.getJSON(jsonName, function(data) {

        var pg_title=data.metadata.title;
        $(document).ready(function (){
            document.title = pg_title;
            document.getElementById("page_title").innerHTML=pg_title;
        });

        for (var i in data.sections) {
            var section_title=data.sections[i].title;
            var section_content=data.sections[i].content;
            var section_id=data.sections[i].title;
                var lastChar = section_id.indexOf(' ');
            section_id = section_id.slice(0,lastChar).toLowerCase();
            document.getElementById("sections").innerHTML+="<h2 id='" + section_id + "'>" + section_title + "</h2>" + "<p>" + section_content + "</p>";
        }

    });
}

并从您的 html 中调用它，如下所示：

  <script type="text/javascript"> 

 $(document).ready(function(){

    SomeFunctionName('data.json');

    });

</script>
于 2012-12-11T20:14:09.190 回答
1

假设您的页面网址是http://path/cabinet.html

在您的脚本中，您可以使用正则表达式获取页面名称：

var pageName = /\/(.+)\.html/.exec(window.location.href)[1];

（将返回 pageName="cabinet"）

然后您可以将页面名称传递给您的函数：

$.getJSON(pageName+'.json', function(data) {...
于 2012-12-11T20:24:33.520 回答
0

根据 Christophe 的反馈，以这个结束。非常感谢你。现在——我无法摆脱第二个 document.ready (.getJSON)，因为如果我这样做，该函数将不会执行。

$(document).ready(function () {
"use strict";
var pageName;
if (!pageName) {
    pageName = "index";
} else {
    pageName = /\/(.+)\.html/.exec(window.location.href);
}

$.getJSON(pageName + '.json', function (data) {
    var pg_title;
    pg_title = data.metadata.title;
    $(document).ready(function() {
        document.title = pg_title;
        document.getElementById("page_title").innerHTML = pg_title;
    });

    for (i in data.sections) {
        var section_title, section_content, section_id, lastChar, i;
        section_title = data.sections[i].title;
        section_content = data.sections[i].content;
        section_id = data.sections[i].title;
        lastChar = section_id.indexOf(' ');
        section_id = section_id.slice(0, lastChar).toLowerCase();
        document.getElementById("sections").innerHTML += "<h2 id='" + section_id + "'>" + section_title + "</h2>" + "<p>" + section_content + "</p>";
    }
});
});
于 2012-12-11T21:50:08.750 回答