0

私はオンですindex.html、私はajaxquery.phpして結果を取得します。最初に色/サイズ情報なしでテキストが表示block.htmlされないように、ロードする前にどのように入力しますか?content

index.html

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

block.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 があり、合理的な方法でそれらをマージする必要があります。あなたは基本的にclient-side templatingをやっています。

基本的なアプローチの 1 つを次に示します。

  1. $.get必要な HTML を jQuery オブジェクトに変換するprocessBlock()
  2. $.get必要なデータgetDataFor($el)
  3. #1 を #2 の結果で更新するrenderBlock($el, data)
  4. 更新された HTML を DOM に挿入するaddToContent($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 に答える