在成功的 AJAX 发布后重新呈现 HTML 模板片段或部分答案

【问题标题】：Rerender a HTML template fragment or section after a successful AJAX post在成功的 AJAX 发布后重新呈现 HTML 模板片段或部分
【发布时间】：2012-04-03 13:14:15
【问题描述】：

我正在尝试实现一个功能，但我不知道如何去做。我的项目利用 Django 来实现后端逻辑和模板以及前端的 Google Closure javascript 库。

我的用例如下：

我使用“比率”值来计算众多实体的总金额。实体以表格形式显示如下：

<!-- I need to reload this table again.  -->
<table class = "striped" ....>
 <thead>
   <tr>
      <th>Entity</th>
      <th>Amount (USD)</th>
      <th>Rate (%)</th>
    </tr>
  </thead>
  <tbody>
     {% for entity in entities %}
     <tr>
        <td>{{ entity.name }}</td>
        <td>${{ entity.total }}</td>
        <td>{{ entity.rate }}</td>
     </tr>
    {% endfor %}
  </tbody>
 </table>

可以在数据库表中使用费率来计算总金额。但我必须执行以下 "what-if" 场景； 如果更改“费率”，总数会是多少？

我有一个接受新汇率的输入框，如下所示：

<label for="Updated Rate">
<input type=number id="updatedRate" name="updatedRate" value="0" />
<input type="button" value="Update Rate" />
<input type="button" value="Recalculate Entities"/>
<input type="reset" value="Reset rate and Recalculate"/>

然后，当用户单击 Update Rate 按钮时，我将更新速率值存储到 Windows 本地存储中。如果用户单击 Recalculate Entities 按钮，那么我想向后端发出 AJAX 请求以重新计算更新的值并使用更新的值重新呈现表格。如果用户重置费率值，则重新计算的值必须是。在这种情况下，使用的费率将从数据库中获取，并且必须重新渲染表。

我知道如何向后端发出 AJAX 请求以重新计算数据。但如果“速率”已更新或重置，我不知道如何重新呈现表格。

【问题讨论】：

标签： javascript ajax django django-templates google-closure

【解决方案1】：

您需要一种方法来识别您正在计算的实体。比如：

{% for entity in entities %}
 <tr data-id="{{ entity.id }}">
    <td>{{ entity.name }}</td>
    <td class="total">${{ entity.total }}</td>
    <td>{{ entity.rate }}</td>
 </tr>
{% endfor %}

然后在ajax的回调中替换总数：

$.ajax({
  url: 'someurl',
  success: function(json) {
    $('tr[data-id=' + json.id + '] td.total').text(json.total);
  }
});

当然返回数据的实际结构会有所不同。但我认为你已经掌握了基本结构。

有帮助吗？

【讨论】：

今天让我试试这种方法。感谢您的帮助。