Python 如何将JSON数据从Django视图传递到Vue.js实例方法_Python_Json_Django_Templates_Vue.js

Python 如何将JSON数据从Django视图传递到Vue.js实例方法

python json django templates vue.js

Python 如何将JSON数据从Django视图传递到Vue.js实例方法,python,json,django,templates,vue.js,Python,Json,Django,Templates,Vue.js,我是Vue.js的新手。如何将JSON数据从Django视图传递到vue实例（方法） Views.py VueScript.js 模板（article.html） ... 我试图访问VueScript.js中的JSON数据，而不是JSON数据，我得到的是完整的HTML结构有人能帮我吗。？谢谢也许您应该使用json响应： from django.http import JsonResponse def articles(request): model = News.obj

我是Vue.js的新手。如何将JSON数据从Django视图传递到vue实例（方法）

Views.py

VueScript.js

模板（article.html）

...

我试图访问VueScript.js中的JSON数据，而不是JSON数据，我得到的是完整的HTML结构

有人能帮我吗。？谢谢

也许您应该使用

json响应

：

from django.http import JsonResponse

def articles(request):
    model = News.objects.all() # getting News objects list
    random_generator = random.randint(1, News.objects.count())
    context = {
              'title' : 'Articles' , 
              'modelSerialize' :  serializers.serialize('json',News.objects.all()),
              'num_of_objects' : News.objects.count() , 
              } 
    return JsonResponse(context)

您遇到的问题是render返回的响应的内容类型为

text/html

，而ajax调用需要的是内容类型为

application/json

的响应。

JsonResponse

是确保响应内容类型正确的快速方法。您可以阅读更多关于JsonResponse的信息或阅读此StackOverflow

您可以将html添加到vue组件中，并通过restful api提供json，例如使用Django Rest框架。要进行API调用，请将vue路由器添加到vue：可能是这样的：

views.py

context = {'page_data' : json.dumps({"title": "Articles"})}

article.html

<body data="{{ page_data }}">

我只获取JSON数据并显示在页面中。如何使用JSON数据获取完整的html页面

from django.http import JsonResponse

def articles(request):
    model = News.objects.all() # getting News objects list
    random_generator = random.randint(1, News.objects.count())
    context = {
              'title' : 'Articles' , 
              'modelSerialize' :  serializers.serialize('json',News.objects.all()),
              'num_of_objects' : News.objects.count() , 
              } 
    return JsonResponse(context)

context = {'page_data' : json.dumps({"title": "Articles"})}

<body data="{{ page_data }}">

beforeMount(){
  this.page = JSON.parse(document.getElementsByTagName('body')[0].getAttribute('data') || '{}');
}