Django使用jQuery和ajax每隔x秒更新/刷新html中的表数据

2024-06-01 06:59:20 发布

您现在位置:Python中文网/ 问答频道 /正文

我在使用下面的jQuery和ajax代码自动更新表数据和每隔x秒更新一次日期方面遇到了问题。我正在尝试查看另一个视图(获取更多表),然后在不需要手动刷新的情况下将此数据附加到表中,但是我无法更新它。如果我检查控制台日志,数据就在那里,每10秒更新一次。我对编程、django、python等都是新手,所以我为任何糟糕的编程技术道歉!你知道吗

我试图在ajax调用的末尾添加一些部分,比如$alms\u list=data;但是我找不到正确的语法来使用。我已经做了一些研究,我想我需要遍历行,并使用.append?但我不能让它工作。任何帮助都将不胜感激。你知道吗

你知道吗视图.py ''Python

def home(request):
    #alms_list = data.objects.filter(date__gt=myDate).order_by('-date')
    myDate = timezone.localtime(timezone.now()) # Get Current Time
    formatedDate = myDate.strftime("%d-%m-%Y %H:%M:%S")
    alms_list = data.objects.filter(alm_date__gt=myDate).order_by('alm_date')
    return render(request, 'home.html', {'alms_list' : alms_list, 'date': formatedDate })

def get_more_tables(request):
    myDate = timezone.localtime(timezone.now()) # Get Current Time
    formatedDate = myDate.strftime("%d-%m-%Y %H:%M:%S")
    alms_list = data.objects.filter(alm_date__gt=myDate).order_by('alm_date')
    return render(request, 'get_more_tables.html', {'alms_list' : alms_list, 'date': formatedDate })

''

你知道吗网址.py ''Python

urlpatterns = [
    path('home/', views.home, name='home'),
    #path('', views.login_redirect, name='login_redirect'),
    path('alms/', views.index, name='index'),
    path('get_more_tables/', views.get_more_tables, name='get_more_tables'),
]

''

你知道吗型号.py ''Python

from django.db import models
from django import forms

# Create your models here.
class data(models.Model):
    your_name = models.CharField('Your name', max_length=100, default='defaultname')
    site = models.CharField('Site Name', max_length=100, default='defaultsite')
    message = models.TextField(default='defaultmessage')
    alm_date = models.DateTimeField('%d/%m/%Y %H:%M', help_text='example dd/mm/yyyy hh:mm (23/12/2020 14:30)')

''

你知道吗主页.html ''html

{% extends 'base.html' %}

<div class="container" id="test-refresh">
    {% block content %}
    <p class="date-time"> {{ date }} </p>
    <table>
        <tr>
            <th>Name</th>
            <th>Site</th>
            <th>Message</th>
            <th>Date</th>
        </tr>
        {% for item in alms_list %}
        <tr>
            <td>{{ item.your_name }}</td>
            <td>{{ item.site }}</td>
            <td class="alrm-mess">{{ item.message }}</td>
            <td>{{ item.alm_date }}</td>
        </tr>
    {% endfor %}
    </table>


<head>
  <script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function refresh() {
    $.ajax({
        url: '/alms/get_more_tables',
        success: function(data) {
            console.log(data);
            $('#test-refresh').html(data);
        $alms_list = data; },

    });
    setTimeout(refresh, 10000);

}

$(function(){
    refresh();
});

</script>

{% endblock content %}
</head>
</div>

get_more_tables.html
'''html
{{ date }}
{% for item in alms_list %}
        <tr>
            <td>{{ item.your_name }}</td>
            <td>{{ item.site }}</td>
            <td class="alrm-mess">{{ item.message }}</td>
            <td>{{ item.alm_date }}</td>
        </tr>
    {% endfor %}

''


Tags: nametablesdatagetdatemodelshtmlmore