时间戳

首页 > 解决方案 > 使用 Django 和 AJAX 的动态 HTML 页面的最小示例

python - 使用 Django 和 AJAX 的动态 HTML 页面的最小示例

问题描述

我参考以下帖子：

尽管有两个帖子和很好的答案，但我仍在努力为求助于 Django 和 AJAX 的动态 HTML 页面构建一个最小的工作示例。

我必须遵循代码：

模型.py

from django.db import models


class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

网址.py

from django.conf.urls import url
from . import views

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

视图.py

from django.shortcuts import render
from .models import Question

def index(request):
    a = Question.objects.order_by('-pub_date')
    context = {'questions': a}
    return render(request, 'polls/index.html', context)

def get_more_tables(request):
    a = Question.objects.order_by('-pub_date')
    context = {'questions': a}
    return render(request, 'polls/get_more_tables.html', context)

索引.html

<html>
<body>

<table id="_appendHere">
<tr><td> text </td></tr>

{% for a in questions %}
<tr><td>    {{ a.question_text }} </td></tr>
{% endfor %}

</table>
</body>
</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
var append_increment = 0;
setInterval(function() {
    $.ajax({
        type: "GET",
        url: "{% url 'get_more_tables' %}",
        data: {'append_increment': append_increment}
    })
    .done(function(response) {
        $('#_appendHere').append(response);
        append_increment += 10;
    });
}, 1000)

get_more_tables.html

{% for a in questions %}
<tr><td>    {{ a.question_text }} </td></tr>
{% endfor %}

我有以下问题：

通过 python manage.py shell，应该显示整个内部数据库。然而，什么都没有发生。当我手动刷新站点时，会显示所有条目。

标签： pythonhtmlajaxdjango

解决方案

您的 HTML 无效，有几个原因。

首先，将脚本块放在结束</html>标记之外。这意味着它在文档本身之外，并且可能无法被浏览器读取。

更重要的是，您没有将代码放在适当的脚本元素中。您有一个开始标签，但您使用它通过src属性引用外部 jQuery 库。你根本没有结束标签

您需要将 jQuery 引用放在它自己的元素中，并为您自己的脚本使用正确的开始和结束标记。

<html>
<body>
<table>
...
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var append_increment = 0;
setInterval(function() {
    $.ajax({
        type: "GET",
        url: "{% url 'get_more_tables' %}",
        data: {'append_increment': append_increment}
    })
    .done(function(response) {
        $('#_appendHere').append(response);
        append_increment += 10;
    });
}, 1000)
</script>
</body>
</html>

推荐阅读