关于 javascript:combining django 与 ajax — 在不刷新整个页面的情况下更改表条目


combining django with ajax -- change a table entry without refreshing the whole page

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
                    newtype1
                    newtype2
                    delete
                <td>
</table>

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

我想将其与 ajax 结合起来，这样无需刷新整个页面即可反映更改。

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

谢谢！

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('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() 函数)。
  • 它将单击事件添加到表格单元格 ($('td a').click()) 内的每个锚标记。
  • 事件的默认动作是停止(即我们不点击链接并打开新页面)
  • 然后对锚标记的href 进行ajax 调用。
  • 当收到带有 200 状态代码的 http 响应时，该行会根据锚中文本的值进行更新(即 success: 回调)
    • 相关讨论