weixin_33726313 2013-12-15 11:18 采纳率: 0%
浏览 39

模板化AJAX返回数据

I am receiving data from php in the form on an obj, and am sending it through a mustache template to make a table.

My question is how can i control the row breaks for my data, I wish to insert a <tr> for every 3 <td> is this possible without the help of Javascript?

Data coming from PHP:

    {"Form":[
{"Label":"Name","Info":"megan fox"},
{"Label":"Phone","Info":"(111) 222-3333"},
{"Label":"Name","Info":"sfsdfsdf"},
{"Label":"Zip","Info":"dsfsdfs"},
{"Label":"State","Info":"sdfsf"},
{"Label":"City","Info":"4fsfsf"},
{"Label":"Address","Info":"dfsodufsf"},
{"Label":"Phone #","Info":"(111) 222-3333"},
{"Label":"Zip","Info":"34545345"},
{"Label":"State","Info":"sdfsf"},
{"Label":"City","Info":"sdfosdffd"},
{"Label":"Address","Info":"sdfsfssf"}
    ]}

Mustache template

<table>
{{#Form}}
<tr>
<td><span class="label">{{Label}}</span>
<span class="Information">{{Info}}</span> 
</td>
</tr>
{{/Form}}
</table>

Result

<table>
<tbody>
<tr>
<td><span class="label">Name</span> 
<span class="Information">megan fox</span> </td>
</tr>
<tr>
<td><span class="label">Phone</span> 
<span class="Information">(434) 434-543</span> </td>
</tr>
<tr>
<td><span class="label">Name</span> 
<span class="Information">sfsdfsdf</span> </td>
</tr>
   ..
</tbody>
</table>

What I want: 3 TD in 1 TR.

<table>
<tbody><tr>
<td><span class="label">Name</span> 
<span class="Information">megan fox</span> </td>
<td><span class="label">Phone</span> 
<span class="Information">(111) 222-3333</span> </td>
<td><span class="label">Name</span> 
<span class="Information">sfsdfsdf</span> </td>
</tr>
...
</tbody></table>
  • 写回答

1条回答 默认 最新

  • elliott.david 2013-12-15 12:47
    关注

    Reading the manual here http://mustache.github.io/mustache.5.html is says that

    When the value is a non-empty list, the text in the block will be displayed once for each item in the list. The context of the block will be set to the current item for each iteration. In this way we can loop over collections.

    I think that if you can change the output from the server, this may offer the simplest solution. Can you get the output to look like this?

    {
    "Form": {
        "Items": [
            {"Label": "Name", "Info": "megan fox"},
            {"Label": "Phone", "Info": "(111) 222-3333"},
            {"Label": "Name", "Info": "sfsdfsdf"},
            {"Label": "Zip", "Info": "dsfsdfs"},
            {"Label": "State", "Info": "sdfsf"},
            {"Label": "City", "Info": "4fsfsf"},
            {"Label": "Address", "Info": "dfsodufsf"},
            {"Label": "Phone #", "Info": "(111) 222-3333"},
            {"Label": "Zip", "Info": "34545345"},
            {"Label": "State", "Info": "sdfsf"},
            {"Label": "City", "Info": "sdfosdffd"},
            {"Label": "Address", "Info": "sdfsfssf"}
        ]
    }
}

    If so, you can then get your template to iterate over the Items, you will then need to change your template to this;

    <table>
{{#Form}}
<tr>
{{#Items}}
<td><span class="label">{{Label}}</span>
<span class="Information">{{Info}}</span> 
</td>
{{/Items}}
</tr>
{{/Form}}
</table>
    评论

报告相同问题？

  • ajax数据返回进行遍历的实例讲解
    2020-10-18 06:25
    在本文中，我们将深入探讨如何使用Ajax来获取和遍历返回的数据。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在这个实例中，我们将展示如何处理...
  • jQuery中ajax获取数据赋值给页面的实例
    2020-10-18 20:39
    7. 请求的返回数据类型指定为"json"，表明服务器返回的数据格式为JSON。 8. async设置为false，意味着请求是同步进行的。这意味着在AJAX请求返回响应之前，浏览器将停止处理后续代码，直到响应返回。这通常不是推荐...
  • ajax 返回类型为json,ajax返回数据类型为JSON数据的处理
    2021-08-06 08:17
    Nowfitness阳阳的博客 JSON数据处理：1.编码格式必须为utf82.echo...json_encode返回的是json数据。3.大小写一定要区分，否则可能会查不到数据，报错。无标题文档$.ajax({url:"jsonchuli.php",dataType:"JSON",success: function(data){va...
  • springboot怎么返回ajax,springboot统一ajax返回数据格式，并且jquery ajax success函数修改...
    2021-08-05 15:12
    of soul的博客 jquery Ajax请求示例，jquery Ajax基本请求方法示例 jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ... Ajax返回数据格式 Ajax中...
  • 超漂亮智能看板 大屏展示 前端静态模板
    2024-06-10 13:55
    前端模板中的JavaScript代码会处理这些请求，将返回的数据转化为可视化的图表。数据的格式可能是JSON，通过JSON.parse()函数解析后，可以方便地与图表库配合使用。 5. **资源文件**：`images`目录包含了图标和其他...
  • vue使用ajax获取后台数据进行显示的示例
    2020-10-18 06:37
    总结来说，这个示例展示了如何利用 Vue.js 和 AJAX（通过 vue-resource 插件）从后台获取数据，并实时更新到前端页面上。通过这种方式，我们可以创建动态且交互性强的用户界面，提高用户体验。同时，注意在实际项目...
  • ajax和beego前后端json格式数据交互实例
    2022-03-05 18:17
    Beego通过提供强大的Go结构体到JSON的转换能力，简化了后端的开发工作，而Ajax则让前端能够轻松地发送和接收JSON数据，实现页面的无刷新更新。在实际项目中，这样的组合能够提高用户体验，同时降低服务器负载。
  • 前端学习笔记005：数据传输 + AJAX + axios
    2022-10-16 17:57
    copcin的博客 本文要学习的东西又多又杂，包含 JSON、XML、HTTP 协议、AJAX 请求、Promise、axios。（大家也可以看到我已经努力把题目缩到最短了（T_T））但这些知识对后面前端框架的学习是很有帮助的，所以马上开始~
  • Ajax获取数据然后显示在页面的实现方法
    2020-10-21 16:15
    总的来说，Ajax获取数据并在页面显示的实现涉及前端JavaScript的异步操作、模板引擎的使用以及与后端服务器的通信。通过这种方式，可以提高用户体验，使页面交互更加流畅，而无需每次操作都重新加载整个页面。
  • bootstrap+ssm+ajax+返回json数据
    2018-08-15 10:21
    一个典型的流程可能是这样的：用户在Bootstrap构建的界面中触发Ajax请求，SpringMVC控制器接收到请求后，利用MyBatis执行数据库操作，然后将结果转换成JSON格式返回给前端，前端通过JavaScript解析JSON数据并动态...
  • 没有解决我的问题, 去提问