Question

我指的是以下帖子：

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

我必须遵循以下代码：

models.py

from django.db import models


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

urls.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')
]

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

index.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 %}

我遇到以下问题：

根据Console Error with Ajax: ReferenceError: $ is not defined，我需要在js脚本中设置js.file。如果我不这样做，则会出现“ ReferenceError：未定义$”错误。特别是为什么要这样做，因为对于前面提到的上述帖子没有必要？
如果我运行http://localhost:8000/polls/，则什么都不会发生。我以为是当我使用

q2 =问题（question_text =“ Whats up4？”，pub_date = timezone.now（）） q2.save（）

通过python manage.py shell，应该显示整个内部数据库。但是，没有任何反应。当我手动刷新网站时，将显示所有条目。

Mozilla的检查器控制台不显示任何条目。 Mozilla的网络控制台确实显示/ pools和外部js文件已被访问。但是，没有显示以1s为间隔的连续访问（不确定是否应该这样）。

Answer 1

您的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>

Answer 2

您必须将jquery外部化到另一个文件中（没有任何标签，只有jquery）。并添加一个准备好的功能：

$(document).ready(function(){
    // Your JS code here
});

在html中，执行以下操作：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="<relative_path_to_your_js>">

路由/ polls /不存在。所以什么也没发生。您仅定义了路由/和/get_more_tables。

我不明白最后一个问题，您在Interactive Console中输入什么？（输入./manage.py shell后）

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

2 个答案: