一个 json 请求到多个 DOM 目标 - 如何实现？

发布于 2024-11-26 03:05:38 字数 997 浏览 2 评论 0原文

我有一个“列表”，我想用 background-json 请求填充它。项目有不同的标题，流量应该最小（移动网络应用程序）， DOM 结构类似于：

<div id="deckStart">
  <div id="cardContacts">
    <h2>Contacts</h2>
    <div id="cardContactsContent">nothing here until JSON</div>
  </div>
  <div id="cardTodo">
    <h2>To do</h2>
    <div id="cardTodoContent">nothing here until JSON</div>
  ....

//EDIT

OK，这有效：

x$(window).on('load', function() {
  x$(window).xhr('json.txt', {
    async: true,
    callback: function() {
      var t = eval('(' + this.responseText + ')');
      for(var key in t) {
        var obj = t[key];
        x$('#' + key).html('inner',obj);
      }
    }
 });

但是为什么 JSON.parse 在 chrome 上不起作用？ Eval 看起来很脏..

//end edit

用一个 JSON 请求填充相应内容 div 的最有效方法是什么？

临时加载到 JS 数组中？
临时加载到隐藏的 DOM 部分？
一些正则表达式技巧或其他我想不到的？

网络稳定性/速度不可靠。

问候，

原文

I'm having a "list" that I want to populate with a background-json request.
Items have different headings and traffic should be minimal (mobile webapp),
DOM-structure something like:

<div id="deckStart">
  <div id="cardContacts">
    <h2>Contacts</h2>
    <div id="cardContactsContent">nothing here until JSON</div>
  </div>
  <div id="cardTodo">
    <h2>To do</h2>
    <div id="cardTodoContent">nothing here until JSON</div>
  ....

//EDIT

OK, this works:

x$(window).on('load', function() {
  x$(window).xhr('json.txt', {
    async: true,
    callback: function() {
      var t = eval('(' + this.responseText + ')');
      for(var key in t) {
        var obj = t[key];
        x$('#' + key).html('inner',obj);
      }
    }
 });

but why doesn't JSON.parse work on chrome? Eval seems dirty..

//end edit

What would be the most efficient way to populate the respective content-divs with one single JSON-request?