當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

django之jquery完成ajax

發布時間：2025/3/15 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 django之jquery完成ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用Ajax

使用視圖通過上下文向模板中傳遞數據，需要先加載完成模板的靜態頁面，再執行模型代碼，生成最張的html，返回給瀏覽器，這個過程將頁面與數據集成到了一起，擴展性差
改進方案：通過ajax的方式獲取數據，通過dom操作將數據呈現到界面上
推薦使用框架的ajax相關方法，不要使用XMLHttpRequest對象，因為操作麻煩且不容易查錯
jquery框架中提供了$.ajax、$.get、$.post方法，用于進行異步交互
由于csrf的約束，推薦使用$.get
示例：實現省市區的選擇
最終實現效果如圖：

引入js文件

修改settings.py關于靜態文件的設置

STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]

在models.py中定義模型

class AreaInfo(models.Model):aid = models.IntegerField(primary_key=True)atitle = models.CharField(max_length=20)aPArea = models.ForeignKey('AreaInfo', null=True)

生成遷移

python manage.py makemigrations python manage.py migrate

通過workbench向表中填充示例數據

參見“省市區.sql”
注意將表的名稱完成替換

在views.py中編寫視圖

index用于展示頁面
getArea1用于返回省級數據
getArea2用于根據省、市編號返回市、區信息，格式都為字典對象

from django.shortcuts import render from django.http import JsonResponse from models import AreaInfodef index(request):return render(request, 'ct1/index.html')def getArea1(request): list = AreaInfo.objects.filter(aPArea__isnull=True) list2 = [] for a in list: list2.append([a.aid, a.atitle]) return JsonResponse({'data': list2}) def getArea2(request, pid): list = AreaInfo.objects.filter(aPArea_id=pid) list2 = [] for a in list: list2.append({'id': a.aid, 'title': a.atitle}) return JsonResponse({'data': list2})?

在urls.py中配置urlconf

from django.conf.urls import url from . import viewsurlpatterns = [url(r'^$', views.index),url(r'^area1/$', views.getArea1),url(r'^([0-9]+)/$', views.getArea2), ]

主urls.py中包含此應用的url

from django.conf.urls import include, url from django.contrib import adminurlpatterns = [url(r'^', include('ct1.urls', namespace='ct1')),url(r'^admin/', include(admin.site.urls)), ]

定義模板index.html

修改settings.py的TEMPLATES項，設置DIRS值

'DIRS': [os.path.join(BASE_DIR, 'templates')],

定義模板文件：包含三個select標簽，分別存放省市區的信息

<!DOCTYPE html> <html> <head><title>省市區列表</title> </head> <body> <select id="pro"><option value="">請選擇省</option> </select> <select id="city"><option value="">請選擇市</option> </select> <select id="dis"><option value="">請選擇區縣</option> </select> </body> </html>?

在模板中引入jquery文件

編寫js代碼

綁定change事件
發出異步請求
使用dom添加元素

轉載于:https://www.cnblogs.com/alexzhang92/p/9529787.html

總結

以上是生活随笔為你收集整理的django之jquery完成ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：控制台激活关闭事件
下一篇：张季跃201771010139《面向对象