0

目前，我有一个显示查询结果的巨型表。我根据条目的“类型”显示条目的背景颜色。我还为用户添加了两个链接来更改条目的类型，如果他们愿意的话。

下面是非常简单的模板代码。可以看到用户可以通过访问/changetype/url来改变entry的类型。更改类型后，我将用户重定向回原始页面，并使用新类型（当然还有不同的背景颜色）。用户也可以删除该条目

<table>
    {% for entry in entries %}
            {% if entry.type == 1 %}
                <tr bgcolor= '#007f7f'>
            {% elif entry.type == -1 %}
                <tr bgcolor= '#f5cbe1'>    
            {% endif %}
                <td width="90 pixels">{{ entry.field1 }}</td>  
                <td width="60 pixels">{{ entry.field2 }}</td>
                <td>
                    <a href="/changetype/?pk={{entry.pk}}&newtype=1">newtype1</a>
                    <a href="/changetype?pk={{entry.pk}}&newtype=-1">newtype2</a>
                    <a href="/changetype?pk={{entry.pk}}&action=delete">delete</a>
                <td>
</table>

烦人的问题是，当类型改变时，浏览器必须刷新整个页面以反映背景颜色的变化。

我想将此与 ajax 结合使用，因此无需刷新整个页面即可反映更改。

听说dajax是django和ajax结合的最好的框架之一。我想知道如何在 dajax 中实现这一点？我在ajax方面经验很少（而且我也认为django比ajax更容易维护），所以我想写尽可能少的ajax...

谢谢！

4

1 回答 1

0

我不了解 dajax，但以下是如何使用 jquery 执行此操作的示例。您不需要更改 django 视图（尽管您可能应该）。在对表进行更改之前，ajax 从 django 视图中检查 http 200。

$('document').ready(function() { 
    $('td a').click(function(e) {
        e.preventDefault()
        var href = $(this).attr('href');
        var tableRow = $(this).parents('tr');
        var action = $(this).html();
        $.ajax({
            url: href,
            success: function() {
                  if (action == 'newtype1') {
                      tableRow.attr('bgcolor', '#007f7f');
                  } else if (action == 'newtype2') {
                      tableRow.attr('bgcolor', '#f5cbe1');
                  } else if (action == 'delete') {
                      tableRow.remove();
            },
        )};
    }
}

您可以将此代码添加到<head>您的页面。

  1. 代码等待页面完全加载（这就是ready()函数）。
  2. 它将点击事件添加到表格单元格 ( $('td a').click()) 中的每个锚标记。
  3. 事件的默认动作是停止（即我们不点击链接打开新页面）
  4. 然后对锚标记的 href 进行 ajax 调用。
  5. 当收到带有 200 状态码的 http 响应时，根据锚点中文本的值更新该行（即success:回调）
于 2013-02-17T21:06:38.677 回答