使用 ajax/json 加载多个内容 div答案

【问题标题】：Multiple content div loading with ajax/json使用 ajax/json 加载多个内容 div
【发布时间】：2019-12-31 02:24:14
【问题描述】：

我已经使用 Ajax 实现了外部内容加载。现在我想使用我拥有的 Json 对象代码添加多个容器加载功能。

能否请您帮我将 json 对象代码合并到 Ajax 代码中。我的编码知识非常有限:)

这里是详细信息：

这里是json对象：

var json = [{
  'id': 'content',
  'wrapper': '__content-wrapper'
}, {
  'id': 'content',
  'wrapper': '__content-wrapper'
}]

$.each(json, function(i, itm) {
  $('#' + itm.id).wrap('<div id="' + itm.wrapper + '"></div>');
  pageload(itm.id, itm.wrapper);
}

function pageload(id, wrapper) {

}

这里是 Ajax 代码：

$(document).ready(function() {
  var contentWrapID = '___content-wrapper';

  $('#content').wrap('<div id="' + contentWrapID + '"></div>');

  function showNewContent() {
    $("#" + contentWrapID).slideDown();
    $('#load').fadeOut();
  }

  function pageload(hash) {
    if (hash) {
      $("#" + contentWrapID).load(hash + " #content", '', function() {
        if ($('img:last', this).get(0)) {
          $('img:last', this).load(function() {
            showNewContent();
          });
        } else {
          showNewContent();
        }
      });
    } else {
      $("#" + contentWrapID).load("index.html #content");
    }
  }
  $.historyInit(pageload);

  $('#topnav li a').click(function() {

    var hash = $(this).attr('href');
    hash = hash.replace(/^.*#/, '');
    $("#" + contentWrapID).slideUp(300, function() {
      $.historyLoad(hash);
    });
    if (!$('#load').get(0)) {
      $('#container').append('<span id="load">LOADING...</span>');
    }
    $('#load').fadeIn('normal');
    $('#topnav li a').removeClass('current');
    $(this).addClass('current');
    return false;
  });
});

.......................

据我所知，我必须替换这一行：

var contentWrapID = '___content-wrapper';

使用 json 对象：

var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content2', 'wrapper': '__content-wrapper2'}];

但我还必须更改页面加载函数，以便它与传递的新变量一起使用：

function pageload (id, wrapper) {

}

我还想补充一点，这就是我特别想要完成的事情：

为了能够将内容加载到，（我们称之为#div 1）从html页面中的相应#div中提取，（我们称之为featured.html）通过单击第一个导航中的任何选项卡菜单，（我们称之为#topnav）。
为了能够将内容加载到，（我们称之为#div 2）从另一个html页面中的相应#div中提取，（我们称之为news.html）通过单击第二个导航中的任何选项卡菜单，（我们称之为#vertnav-bar）。

P.S 每次点击只会加载一个 div。（根据您的解释，我认为我提到的关于页面加载调用函数的这一特定细节很重要。换句话说，在任何给定时间点，点击都不会将数据加载到多个#div

如果有任何帮助，我将不胜感激

最好的问候保罗

【问题讨论】：

标签： json jquery

【解决方案1】：

如果我对您的理解正确，您需要一些东西来获取您通过 Ajax 调用加载的 JSON 数据并将这个 JSON 对象放入一些 HTML 中。也许你应该看看http://code.google.com/p/jquery-load-json/ JQuery 插件。它使您能够将 json 对象加载到任何 html 元素中

$("#div1").loadJSON( jsonObject );

其中 'div1' 是您的元素的 id，而 jsonObject 是您已经加载的 JSON 对象。插件站点上很少有可以帮助您的示例，例如 http://jquery-load-json.googlecode.com/svn/trunk/categories-ajax.html，其中显示了如何获取带有类别的 json 对象并将它们加载到下拉列表中。每次父类别更改时，都会重新加载子类别。它看起来像您的示例的简化案例。

乔万

【讨论】：