0

PHP が提供する json オブジェクトを取り、それを html に入れられるようにしたいと考えています。信じられないほど長くて理解できない html の文字列を 1 つ作成してから実行するという私の古い方法は、$.append(hmltStr)SO に最後に投稿したときはうまく行きませんでした。John Resign micro-templateの改良版であると思われるこのテンプレートを使用して、json オブジェクトを html に配置する方法を誰かが説明してくれませんか。

オブジェクトを考えると：

{
"order": {
    "name": "TRADEMARK WHEEL COMPANY",
    "sales_order_id": "18278",
    "order_date": "05 \u2044 15 \u2044 2012",
    "due_date": "05 \u2044 21 \u2044 2012",
    "order_number": "1213140",
    "reference": "21192D\/35546",
    "order_description": "BICICLETTE",
    "ship_name": "ADAMS",
    "ship_address1": "1919 W RANDOLPH ST.",
    "ship_address2": "",
    "ship_city": "CHICAGO",
    "ship_state": "IL",
    "ship_postal_code": "60606",
    "ship_country": null,
    "ship_via": "FEDEX GROUND",
    "tracking_number": null,
    "package_contents": null,
    "freight": "0.00",
    "taxable": "0.00",
    "nontaxable": "748.88",
    "sales_tax": "0.00"
},
"line_item": [{
    "description": "RED ONE",
    "quantity": "2.00",
    "sell_price": "349.44"
},
{
    "description": "FRONT GEAR",
    "quantity": "2.00",
    "sell_price": "15.00"
},
{
    "description": "5th GEAR",
    "quantity": "2.00",
    "sell_price": "10.00"
}]

}

このajaxリクエストによって収集されているのですdataが、このajax関数の成功部分でhtmlテーブルにデータを入力するにはどうすればよいですか

$.ajax({
    type: "POST",
    url: "getJSON.php",
    data: submitStr,
    success: function (data) {

    //populate order details

    //loop through variable number of line items

}

<html>

<table id="contentTable">
</table>

</html>

また、<script type="html/javascript></script>タグは何ですか。これは関連があるかもしれないし、関連がないかもしれませんが、私はテンプレートでそれを見てきました。私はそれを使用する必要がありますか？

助けてくれてありがとう！

4

1 に答える 1

0

HTML

a. 次のような jQuery スクリプトを含めます。

<script src=".../libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

b. 次のような vkTemplate プラグインを含めます。

<script src="vktemplate.js" type="text/javascript"></script>

c. HTML ページに、このテーブルに挿入する要素を追加します。次に例を示します。

 <div id="container"></div>

テンプレート

(line_item は配列であるため、順序と line_item の順序が異なることに注意してください)

<table id="contentTable">
    <tr>
        <td>
            label-one:
        </td>
        <td>
            <%= o.order.name %> 
        </td>
    </tr>
    <tr>
        <td>
            label-two:
        </td>
        <td>
            <%= o.line_item[0].description %> 
        </td>
    </tr>
</table>

このテンプレートを (例えばorder.tmplとして) Web サーバーに保存します。

ジャバスクリプト

vkTemplate プラグインを初期化し、テンプレート URL を最初のパラメーターとして、json_data URL を 2 番目のパラメーターとして指定します。

$('#container').vkTemplate( 'order.tmpl', 'getJSON.php' );

この時点で完了です。

それが役立つことを願っています

-ヴァディム

于 2012-05-24T05:41:07.330 に答える