0

我在index.html，我 ajaxquery.php并得到结果。现在如何block.html在加载之前进行填充，content以便在没有颜色/大小信息的情况下首先显示文本？

索引.html

<div id="content"><button id="button1" type="button">click</button></div>

块.html

You selected the color: <div id="color"></div>!
You chose a size of: <div id="size"></div>!

查询.php

$result = array('color' => 'blue', 'size' => '12');
echo json_encode($result);
4

1 回答 1

1

您有一些数据和一些 HTML，您需要以合理的方式将它们合并在一起。你基本上是在做客户端模板。

这是一种基本方法：

  1. $.get您需要的 HTML 并转换为 jQuery 对象processBlock()
  2. $.get您需要的数据getDataFor($el)
  3. 用#2 的结果更新#1renderBlock($el, data)
  4. 将更新后的 HTML 插入 DOMaddToContent($el)

代码：

$.get("block.html", processBlock);

// create a documentFragment to fill in later
function processBlock(html) {
    var $block = $(html);
    getDataFor($block);
}

// get any needed data by querying for JSON
function getDataFor($el) {
     $.getJSON("query.php", function(data) {
         renderBlock($el, data);
     });
}

// take the data and the element and 
function renderBlock($el, data) {
    $el.find("#color").text(data.color);
    $el.find("#size").text(data.size);
    addToContent($el);
}

function addToContent($el) {
    $el.appendTo($("#content"));
}

在非 jquery 领域，您正在创建一个名为 documentFragment 的东西，它允许您在将其插入页面之前创建一些您操作的 DOM。

更简单的小提琴版本：http: //jsfiddle.net/9kLzP/

于 2013-10-25T20:45:01.003 回答