feed.json

// API callback
readFile({
    "version": "1.0",
    "encoding": "UTF-8",
    "feed": {
        "xmlns": "http://www.w3.org/2005/Atom",
        "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
        "xmlns$blogger": "http://schemas.google.com/blogger/2008",
        "xmlns$georss": "http://www.georss.org/georss",
        "xmlns$gd": "http://schemas.google.com/g/2005",
        "xmlns$thr": "http://purl.org/syndication/thread/1.0",
        "title": {
            "$t": "Title Of A Feed"
        },
        "id": {
            "$t": "ID Of The Feed"
        }
    }
});

我正在使用我在</body>文件中index.html标记之前添加的以下代码阅读上述文件。

的index.html

<script>
function readFile(json) {
    alert(json.feed.title.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);

// Again Calling The Same JSON File
function readFileAgain(json) {
    alert(json.feed.id.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFileAgain");
document.body.appendChild(s);
</script>

我想在同一页面上的两个函数中读取此文件，但我无法编辑feed.json文件。当我运行上面的代码时，它上面的读取功能不是第二个。那么如何再次阅读这个文件呢？

Answer 1

jsonp不是json因为您可以看到feed.json中有一个包装器js函数：

readFile({......})
//^^^^^^^--------^----you can see this is a function name readFile

正如您所看到的，readFile应该在加载后调用或作为回调调用，因此在第一种情况下它正在运行，因为回调与函数名称匹配。虽然在第二个回调函数与函数名称不匹配，但它们是不同的。

对于第二个：

readFile != readFileAgain // so it never gets executed.

所以，我建议你使用localStorage：

function readFile(json) {
    if(window.localStorage && !localStorage.getItem['data']){
       localStorage.setItem('data', json); // <-----set it first here
    }
    alert(json.feed.title.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);

// Again Calling The Same JSON File
function readFileAgain() {
    var json = '';
    if(window.localStorage && localStorage.getItem['data']){
      json = JSON.parse(localStorage.getItem['data']); // <------------now get it here.
    }
    alert(json.feed.id.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFileAgain");
document.body.appendChild(s);

Answer 2

feed.json实际上是一个带有单个函数调用的JavaScript文件：它调用readFile()函数将对象作为参数传递。所以它第一次工作，因为你已经定义了readFile函数。另一个readFileAgain已定义但从未被调用过。

您可以在第一次阅读时将文件中的数据分配给全局变量，然后在需要时使用它：

function readFile(json) {
    window.feedjson = json;
}

var s = document.createElement("script");
s.setAttribute("src","feed.json");
document.body.appendChild(s);

现在，数据全局可用feedjson，因此您可以使用它：

function getFeedTitle( data ){
    alert(data.feed.title.$t);
}

function getFeedId( data ){
    alert(data.feed.id.$t);
}

getFeedTitle( feedjson );
getFeedId( feedjson );

Answer 3

我试图找出解决方案，我得到了以下解决方案。它现在完美地工作。通过这个我可以使用单个回调...无限功能...

的index.html

<script>
function readFile(json) {
    readFileAgain(json);
    readFileAgainAgain(json);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);

// Again Calling The Same JSON File
function readFileAgain(json) {
    alert(json.feed.title.$t);
}
function readFileAgainAgain(json) {
    alert(json.feed.id.$t);
}
</script>

本地存储

其他流程正在使用 HTML5本地存储。它也经过测试和工作。你也可以在这里免费使用你的JSON无限时间...

<script style='text/javascript'>
function savePostsJSON(json) {
    if(window.localStorage){
        localStorage.setItem('JSONdata', JSON.stringify(json));
    } else {
        alert("Your Browser Doesn't Suppoet LocalStorage.");
    }
}
var s = document.createElement("script");
s.setAttribute("src","http://www.guitricks.com/feeds/posts/default/?redirect=false&orderby=published&alt=json&max-results=500&callback=savePostsJSON");
document.body.appendChild(s);
function readFile1() {
    var json = JSON.parse(localStorage.getItem("JSONdata"));
    alert(json.feed.id.$t);
}
function readFile2() {
    var json = JSON.parse(localStorage.getItem("JSONdata"));
    alert(json.feed.title.$t);
}
readFile1();
readFile2();
</script>

如何使用JavaScript离线读取JSON文件？

feed.json

的index.html

3 个答案:

的index.html

本地存储