0

我希望能够获取一个 php 提供的 json 对象并将其放入 html 中。我的旧方法只是制作一个非常长、难以理解的 html 字符串，然后在$.append(hmltStr)我最后一次在 SO 上发布它时并没有那么顺利。我想知道是否有人可以向我解释如何使用这个模板将 json 对象放入 html 中，这显然是对John Resign 微模板的改进。

给定对象：

{
"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"
}]

}

是data由这个 ajax 请求收集的，我如何在这个 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

一种。包括 jQuery 脚本，如下所示：

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

湾。包括 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 服务器上

JAVASCRIPT

初始化vkTemplate插件并提供模板URL作为第一个参数，json_data URL作为第二个参数

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

至此，您就完成了。

希望有帮助

-瓦迪姆

于 2012-05-24T05:41:07.330 回答