Skip to main content
 首页 » 编程设计

jquery之使用 AJAX 刷新 Django 动态 HTML 表格

2025年01月19日33shangdawei

首先,我是 Django 的新手,对 AJAX 和 jQuery 几乎完全不熟悉。 我在本地开发。

所以我试图实现一个 HTML 表格,在 AJAX 的帮助下每 X 秒动态刷新一次(没有页面刷新),但我似乎无法让我的代码工作。我已经使用了这个问题中提供的示例:https://stackoverflow.com/a/34775420/6724882

(如果我有足够的代表,我会回答那个问题,或者通过聊天寻求帮助,但我还没有那么奢侈)

我已经尝试让它工作 10 多个小时,我开始感到无助。我一直在疯狂地搜索网络,但我对所有不同的搜索方式感到不知所措,而且每个问题和答案似乎都太老了,或者只是与我的应用程序无关。

目前,该表对于第一个查询工作正常,它显示对象 Kala 和 rivinumero = 1(英文行号)。

所以,我有几个问题。

  • 我应该将脚本包含在它自己的单独文件中,而不是在 HTML 文件(在我的例子中是 displaykala.html)。如果是这样,该文件应该是 在 static/js 文件夹中,还是在其他地方?
  • 我是否需要在某个地方单独包含 AJAX/JS 才能使脚本正常工作?
  • 我明显做错了什么,还是我提供的问题的答案有误?

displaykala.html(脚本在同一个文件)

{% load static %} 
{% include 'loginbar.html' %} 
{% include 'nav.html' %} 
<html> 
    <head> 
        <title>Display</title> 
        <link rel="stylesheet" type="text/css" href="{% get_static_prefix %}css/style.css"> 
    </head> 
    <body> 
            <h1>Display</h1> 
            <table id="_appendHere" class="table table-striped table-condensed"> 
                        <tr> 
                          <th>Id</th> 
                          <th>Nimi</th> 
                          <th>Latnimi</th> 
                        </tr> 
                        {% for kala in kalat %} 
                        <tr> 
                          <td>{{kala.rivinro}}</td> 
                          <td>{{kala.tuote}}</td> 
                          <td>{{kala.latinalainen_nimi}}</td> 
                        </tr> 
                        {% endfor %} 
                      </table> 
    </body> 
</html> 
 
<script> 
    var append_increment = 0; 
    setInterval(function() { 
        $.ajax({ 
            type: "GET", 
            url: {% 'get_more_tables.html' %},  // URL to your view that serves new info 
            data: {'append_increment': append_increment} 
        }) 
        .done(function(response) { 
            $('#_appendHere').append(response); 
            append_increment += 10; 
        }); 
    }, 1000) 
</script> 

get_more_tables.html

{% load static %} 
{% for kala in kalat %} 
<tr> 
   <td>{{ kala.rivinro }}</td> 
   <td>{{ kala.tuote }}</td> 
   <td>{{ kala.latinalainen_nimi }}</td> 
</tr> 
{% endfor %} 

views.py

from django.shortcuts import render 
from adminside.models import Kala 
from adminside.models import Liha 
from django.contrib.auth.decorators import login_required 
# Create your views here. 
 
def index(request): 
    return HttpResponse("Index") 
 
@login_required 
def displaykala(request): 
    kalat = Kala.objects.filter(rivinro=1) 
    return render(request, 'displaykala.html', {'kalat': kalat}) 
 
@login_required 
def get_more_tables(request): 
    increment = int(request.GET['increment']) 
    increment_to = increment + 10 
    kalat = Kala.objects.filter(rivinro=2)[increment:increment_to] 
    return render(request, 'get_more_tables.html', {'kalat': kalat}) 

urls.py(应用文件夹中的一个)

urlpatterns = [ 
    url(r'^$', views.index, name='index'), 
    url(r'^displayk$', views.displaykala, name='displayk'), 
    url(r'^get_more_tables', views.get_more_tables, name='get_more_tables'), 
] 

如果代码中存在“是的,我试过这样做”这类愚蠢的实验,我深表歉意。

请您参考如下方法:

非常感谢@DanielRoseman。 “您的 JS 将值作为 append_increment 发送,但 Python 正在尝试访问增量。–”

我将有问题的行更改为 increment = int(request.GET.get('append_increment')) 并修复了错误,现在表格正在动态更新。非常感谢您花费宝贵的时间。现在我可以继续构建应用程序了!