如何在JavaScript中使用Django模型

时间:2019-10-08 19:01:04

标签: javascript json django

我在Django中有一个应用,数据库中有2条新闻。我正在使用views.py以便在我的html页面中显示这些新闻。

Models.py

class News(models.Model):
    news_title     = models.CharField(max_length=150)
    news_body       = models.TextField(max_length=1500)

Views.py

def news(request):
    news_f = News.objects.all().order_by('-news_id') 
    news_f_html = serializers.serialize("json",News.objects.all())
    news_dic=  {'news_f':news_f,'ac_tab_n':'ac_tab', 'news_f_html':news_f_html}
    return render(request, 'news.html',news_dic)

我想使用html标签显示新闻的正文,但我不能,因为它是一个字符串。我一直在阅读,并且尝试对新闻进行序列化,以便在JavaScript中使用news_f_html。

scripts.js

var news = "{{ news_f_html }}"; 

但这不起作用。我无法显示,例如:

console.log(news[1].news_title) //Note that I have 2 news in my db app

1 个答案:

答案 0 :(得分:1)

静态文件(js,css)对页面上下文一无所知。您需要将该上下文明确传递给您的js代码。 render函数返回一个HttpResponse,默认情况下为纯文本,仅适用于模板。就是这样,Django仅将数据传递给{strong>而不是静态文件,传递给news.html模板(以及传递给{% include "template.html"%}这样的模板)。如果要将数据传递到js文件,请让视图返回JsonResponse,并让js代码通过url提取数据。 由于您刚刚开始使用Django,因此请尝试以类似方式进行操作:

news.html模板中,写以下行(这是初始化变量的方式):

{# news.html #}
...
<script>
  var news = {{ news_f_html }}; // note that this assignment without quotes - "{{ news_f_html }}" will be just string variable
</script>
...

然后在这些行之后,导入带有处理上下文的代码的js文件。 就是这样,js代码从模板中获取了这些变量,并且已经可以使用它们。

{# news.html #}
...
<script>
  var news = {{ news_f_html|safe }}; // note that this assignment without quotes - "{{ news_f_html }}" will be just string variable
</script>
...

<script src="{% static 'path/to/your/js/code.js' %}"></script>

由于您已经在使用序列化器(我认为这是DRF ,请参见更新),所以将来请着眼Django Rest Framework views创建一个API。

更新

因此您正在使用Django's core serializers

在这种情况下,为了获得所需的结果,您需要更改视图,例如,如下所示:

def news(request):
    news_f = News.objects.all().order_by('-news_id') 
    news_f_html = []
    for instance in News.objects.all():  # it's not serialization, but extracting of the useful fields
        news_f_html.append({'pk': instance.pk, 'title': instance.news_title, 'body': instance.news_body})
    news_dic = {'news_f': news_f, 'ac_tab_n': 'ac_tab', 'news_f_html': news_f_html}
    return render(request, 'news.html', news_dic)