在JQuery / Javascript中加载从JSON列表返回的URL的最佳方法是什么

What is the Best Method for Loading a URL Returned from a JSON List in JQuery / Javascript

本文关键字：返回 URL 最佳 是什么 方法 列表 JSON JQuery Javascript 加载      更新时间：2023-09-26

我正在尝试将一些内容 AJAX 放入 #BlogContainerdiv 中，但似乎无法让我的点击功能正常工作。在 if 语句中它似乎正在分崩离析，但我不知道为什么。我已经通过警报进行了测试，并且 JSON 的返回正在按预期进行。初始加载也可以正常工作，只需遍历 JSON 返回并将 url 返回到似乎不起作用的加载函数。

我想要实现的效果是使用 .load 和 JSON 文件中指向内容的 URL 将页面内容（博客条目）加载到 #BlogContainerdiv 中，每次单击 #Nexusdiv 时迭代到下一个。

我的主要问题是通过 JSON 返回动态加载的最佳方法是什么？我有一个 each 函数也做了完全相同的事情（它似乎返回了正确的结果，但实际上不会加载内容）。我决定改用 for 循环，因为我读到的内容表明它的效率略高，尽管我怀疑它对我的情况会产生多大影响。

我是 JS/JQ 的新手，以前使用 JQueryTools 让一切都按照我想要的方式运行，但我认为最好的学习方法是自己做（当然有一点帮助:)）。

.HTML 

<div id="BlogContainer"></div>
<div id="NexusRef" alt="03151201.htm">'03151201.htm'</div>

杰伦

{
    "0": "'03151201.htm'",
    "1": "'01191201.htm'",
    "2": "'00000103.htm'",
    "3": "'00000102.htm'",
    "4": "'00000101.htm'"
}​

爪哇语

$(function() {
    $('#Navigation').load('navi.htm');
    $('#BlogContainer').load('03151201.htm');
    $('#TT1').load('ajtt1.htm');
    $('#TT2').load('ajtt2.htm')
});
$(function() {
    $('#Nexus').click(function() {
        $.getJSON("BlogRoll.json", function(data) {
            var i = 0;
            var n = ($('#NexusRef').html());
            var length = data.length;
            for (i = 0; i < length; i++) {
                if (data[i] == n) {
                    $(function() {
                        $('#BlogContainer').load(data[i + 1]);
                    });
                } else {
                    alert(data[i + 1]);
                }
            }
        });
    });
});​

这应该可以做到

$(function() {
    //assuming you have this JSON to work with:
    var pages = {
        "0": "'03151201.htm'",
        "1": "'01191201.htm'",
        "2": "'00000103.htm'",
        "3": "'00000102.htm'",
        "4": "'00000101.htm'"
    }
    //add a click handler to your button
    $('#Nexus').on('click', function() {
        //prepare a storage url
        var url;
        //pick out first link, copy, and remove it
        //works like Array.shift()
        for (var key in pages) {
            if (pages.hasOwnProperty(key)) {
                url = pages[key];
                delete pages[key]
                break;
            }
        }
        //Do a GET to retrieve contents and append to container
        $.get(url, function(contents) {
            var contents = url;
            $('#BlogContainer').append(contents);
        });
    });
});​
相关文章：