Django & JavaScript 用Ajax實現JSON數據的請求和響應
阿新 • • 發佈：2019-01-16
UNC else admin ros cat nbsp ejs -c var
【描述】
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": "\u7b2c\u4e00\u4e2a\u6807\u9898", "content": "\u7b2c\u4e00\u6761\u5185\u5bb9\uff01\uff01\uff01"}}] 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數據的請求和響應