Django & JavaScript 用Ajax实现JSON数据的请求和响应

Posted 2021-02-03 remly

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django & JavaScript 用Ajax实现JSON数据的请求和响应相关的知识，希望对你有一定的参考价值。

【描述】

1.Server端定义了两个字段：Article.title 和 Article.content

2.客户端用javascript Ajax异步加载请求服务器的JSON数据

效果是点击按钮从服务器的数据库取得第一篇文章的标题

【实现】

网页端：

{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc(){
    var xmlhttp;
    if (window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            //取到的内容：一个JSON对象。相当于一个python的列表，列表里面是嵌套的字典
            //[{"model": "cmdb.article", "pk": 1, "fields": {"title": "u7b2cu4e00u4e2au6807u9898", "content": "u7b2cu4e00u6761u5185u5bb9uff01uff01uff01"}}]
            var ret=JSON.parse(xmlhttp.responseText)
            //这里用.来取得对象的内容，之前没有考虑到是列表一直出现undefined的错误！
            document.getElementById("myDiv").innerHTML=(ret[0].fields.title);
        }
    }
    //这里url在django里面定义了，会用views.py里面的sendjson方法来处理请求
    xmlhttp.open("GET","/thejson/",true);
    xmlhttp.send();
}

</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

Django服务端：

#Views.py

from django.shortcuts import render
from django.http import HttpResponse,JsonResponse
from django.core import serializers
import json
from . import models
# Create your views here.
def sendjson(request):
    articles= models.Article.objects.all() 
    data= serializers.serialize("json", articles)
    print(data)
    #抄别人的写法。
    return HttpResponse(data,content_type="application/json")

def hello(request):
    return render(request,‘index.html‘,locals())

#urls.py

from django.contrib import admin
from django.urls import path
from cmdb import views

urlpatterns = [
    path(‘admin/‘, admin.site.urls),
    path(‘index/‘, views.hello),
    path(‘thejson/‘,views.sendjson),
]

#Models.py

from django.db import models

# Create your models here.
class Article(models.Model):
    title=models.CharField(max_length=32,default=‘‘)
    content=models.TextField(null=True)

    #这里可以让admin后台的文章列表显示正确的文章标题
    def __str__(self):
        return self.title

以上是关于Django & JavaScript 用Ajax实现JSON数据的请求和响应的主要内容，如果未能解决你的问题，请参考以下文章

Django 模板中的 Javascript

django - 在包含的模板中时 javascript 不起作用

将所有 Javascript 移动到 Django 中的单独文件

带有 jquery 和 javascript 的 Django for 循环列表

用 django 模板语言实现 javascript

用javascript重定向django url