Javascript 如何使用vkTemplate用JSON对象填充html_Javascript_Jquery_Json_Jquery Templates

Javascript 如何使用vkTemplate用JSON对象填充html

javascript jquery json

Javascript 如何使用vkTemplate用JSON对象填充html,javascript,jquery,json,jquery-templates,Javascript,Jquery,Json,Jquery Templates,我希望能够获取php提供的json对象并将其转换为html。我以前的方法是只制作一个非常长、不可理解的html字符串，然后执行$.append（hmltStr），但在我上一次将其发布到so上时，效果不太好。我想知道是否有人能向我解释如何将json对象放入html中，这显然是对html的改进鉴于目标： { "order": { "name": "TRADEMARK WHEEL COMPANY", "sales_order_id": "18278", "order_date

我希望能够获取php提供的json对象并将其转换为html。我以前的方法是只制作一个非常长、不可理解的html字符串，然后执行

$.append（hmltStr）

，但在我上一次将其发布到so上时，效果不太好。我想知道是否有人能向我解释如何将json对象放入html中，这显然是对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请求正在收集

数据

，那么在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>

$.ajax({
类型：“POST”，
url:“getJSON.php”，
资料来源：submitStr，
成功：功能（数据）{
//填充订单详细信息
//循环遍历可变数量的行项目
}

另外，什么是

HTML
a、 包括jQuery脚本，如下所示：
<script src=".../libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

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


在这一点上，你完成了
希望有帮助
< Vadim > 
嗨，Vadim，谢谢。这非常有帮助。我可以在模板文件中做普通的JavaScript吗？<代码>，谢谢。你可以。你可以使用普通的JavaScript并在模板中操作对象。实际上，你可以把它当作一个闭包。对了，但是好像有些JavaScript在里面不起作用。这个例子，test
给出了chrome控制台Uncaught SyntaxError:Unexpected identifier vktemplate.js第66行的错误，该行是return new Function（“o”，fn）；你知道这是怎么回事吗？谢谢你的例子中有一个语法错误：第一个花括号必须是“{”
 <div id="container"></div>

<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>

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