Question

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

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

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

谢谢！

Answer 1

我不知道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>。

代码等待页面完全加载（即ready()函数）。
它将click事件添加到表格单元格（$('td a').click()）中的每个锚标记。
事件的默认操作已停止（即我们不会关注该链接并打开新页面）
然后对锚标记的href进行ajax调用。
当收到带有200状态代码的http响应时，该行会根据锚点中的文本值（即success:回调）进行更新

将django与ajax结合使用 - 更改表条目而不刷新整个页面

1 个答案: