Javascript 使用JSON URL数据动态填充HTML表
我的页面上有这个HTML表,我想用这个JSON URL中的数据动态填充它: 老实说,我不知道最好的方法,但从我发现JSON模板似乎是我应该使用的。我找到了“Pure.js”()和“Mustache.js”(https://github.com/janl/mustache.js)使用Javascript帮助将JSON数据转换为HTML。我不知道如何使用这些从URL加载数据,示例都使用静态字符串。我可以/应该用AJAX、jQuery来实现这一点吗?JSON url中的数据每天都在变化 下面的HTML中带有{…}的地方是我希望从url加载数据的地方 如果有人能为我指出正确的方向,并希望能为我提供一个代码示例来帮助我工作,我将不胜感激Javascript 使用JSON URL数据动态填充HTML表,javascript,ajax,json,templating,pure-js,Javascript,Ajax,Json,Templating,Pure Js,我的页面上有这个HTML表,我想用这个JSON URL中的数据动态填充它: 老实说,我不知道最好的方法,但从我发现JSON模板似乎是我应该使用的。我找到了“Pure.js”()和“Mustache.js”(https://github.com/janl/mustache.js)使用Javascript帮助将JSON数据转换为HTML。我不知道如何使用这些从URL加载数据,示例都使用静态字符串。我可以/应该用AJAX、jQuery来实现这一点吗?JSON url中的数据每天都在变化 下面的HTML
<div class="item-details">
<div>
<h5>
{item.name}
</h5>
<p>Aaaarrrghhh ... I'm a monster.</p></div>
<h6>Pricing Information:</h6>
<table>
<tbody>
<tr>
<th>Current guide price:</th>
<td>{item.current.price}</td>
</tr>
<tr>
<th>Today's Change:</th>
<td class="{item.today.trend}">{item.today.price}</td>
</tr>
</tbody>
<tr>
<th>30 Day Change:</th>
<td class="{item.day30.trend}">{item.day30.change}</td>
</tr>
<tr>
<th>90 Day Change:</th>
<td class="{item.day30.trend}">{item.day90.change}</td>
</tr>
<tr>
<th>180 Day Change:</th>
<td class="{item.day30.trend}">{item.day180.change}</td>
</tr>
</table>
</div>
</div>
{item.name}
aaarrrghhh。。。我是个怪物
定价信息:
现行指导价:
{item.current.price}
今天的变化:
{item.today.price}
30天更改:
{item.day30.change}
90天更改:
{item.day90.change}
180天更改:
{item.day180.change}
远端页面上的演示似乎达到了您在上面尝试的目的。我不确定您是否还在寻找示例。如果是的话,有一个是给你的
pure.js
作为jQuery
插件工作,因此您可以使用jQuery
函数从http://services.runescape.com/...
。
若JSON文档的结构并没有改变,pure.js
指令就可以正常工作。目前情况如下:
{"item":{"icon":"...","icon_large":"...","id":1055,"type":"...","typeIcon":"...","name":"...","description":"...","current":{"trend":"neutral","price":"131.2m"},"today":{"trend":"positive","price":"+1.1m"},"day30":{"trend":"positive","change":"+11.0%"},"day90":{"trend":"positive","change":"+14.0%"},"day180":{"trend":"positive","change":"+32.0%"},"members":"false"}}
为了简化pure.js指令模型,我还向HTML模板添加了一些小更改。请记住,最终的HTML应该和预期的一样。
{item.name}
aaarrrghhh。。。我是个怪物
定价信息:
现行指导价:
{item.current.price}
今天的变化:
{item.today.price}
30天更改:
{item.day30.change}
90天更改:
{item.day90.change}
180天更改:
{item.day180.change}
{"item":{"icon":"...","icon_large":"...","id":1055,"type":"...","typeIcon":"...","name":"...","description":"...","current":{"trend":"neutral","price":"131.2m"},"today":{"trend":"positive","price":"+1.1m"},"day30":{"trend":"positive","change":"+11.0%"},"day90":{"trend":"positive","change":"+14.0%"},"day180":{"trend":"positive","change":"+32.0%"},"members":"false"}}
<div class="item-details">
<div>
<h5>{item.name}</h5>
<p>Aaaarrrghhh ... I'm a monster.</p>
</div>
<h6>Pricing Information:</h6>
<table>
<tbody>
<tr>
<th>Current guide price:</th>
<td class="currentPrice">{item.current.price}</td>
</tr>
<tr>
<th>Today's Change:</th>
<td class="todayTrend">{item.today.price}</td>
</tr>
</tbody>
<tr>
<th>30 Day Change:</th>
<td class="day30Trend">{item.day30.change}</td>
</tr>
<tr>
<th>90 Day Change:</th>
<td class="day90Trend">{item.day90.change}</td>
</tr>
<tr>
<th>180 Day Change:</th>
<td class="day180Trend">{item.day180.change}</td>
</tr>
</table>
</div>