django–ajax的使用,應用
- 2019 年 10 月 6 日
- 筆記
Ajax簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是「非同步Javascript和XML」。即使用Javascript語言與伺服器進行非同步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML,現在更多使用json數據）
同步交互：客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；
非同步交互：客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。
AJAX除了非同步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
場景:
優點：
AJAX使用Javascript技術向伺服器發送非同步請求
AJAX無須刷新整個頁面
創建一個新的Django項目:
目錄結構如下:
修改urls.py文件，添加一個index路徑
from django.contrib import adminfrom django.urls import pathfrom app import viewsurlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), ]
修改視圖函數views.py
from django.shortcuts import render# Create your views here.def index(request): return render(request, "index.html")
引入jquery文件,有兩種方式
第一種cdn引入
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
第二種本地文件引入
在項目目錄下面創建一個static的文件夾
修改settting.py文件,添加內容如下:
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static") ]
創建一個jquery.min.js文件，把jquery的內容複製進去就好
在templates模版下，創建index,html文件,內容如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery.min.js"></script> </head> <body> <button class="btn">click</button><script> $(".btn").click(function () { alert(123) })</script></body> </html>
啟動Django,訪問
http://127.0.0.1:8000/index
發送ajax請求
修改index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery.min.js"></script> </head> <body> <button class="btn">click</button><script> $(".btn").click(function () { // 發送Ajax請求 $.ajax({ url:"http://127.0.0.1:8000/books/", type:"get", // 默認get請求 success:function (data) { //回調函數,拿到數據後的操作 console.log(data) } }) })</script></body> </html>
新建路徑books，修改urls.py文件
from django.contrib import adminfrom django.urls import pathfrom app import viewsurlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('books/', views.books),]
新建視圖函數:
from django.shortcuts import render,HttpResponse# Create your views here.def index(request): return render(request, "index.html")def books(request): return HttpResponse("金瓶梅")
訪問http://127.0.0.1:8000/index
點擊按鈕，局部刷新,返回數據
增加標籤:
修改index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery.min.js"></script> </head> <body> <button class="btn">click</button> <p class="con"></p><script> $(".btn").click(function () { // 發送Ajax請求 $.ajax({ url:"http://127.0.0.1:8000/books/", type:"get", // 默認get請求 success:function (data) { //回調函數,拿到數據後的操作 console.log(data); $(".con").html(data) //往p標籤裡面添加內容 } }) })</script></body> </html>
訪問http://127.0.0.1:8000/index
舉例：做一個加法計算
修改index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery.min.js"></script> </head> <body> <button class="btn">click</button> <p class="con"></p><hr> <button class="cal">計算</button><script> $(".btn").click(function () { // 發送Ajax請求 $.ajax({ url:"http://127.0.0.1:8000/books/", type:"get", // 默認get請求 success:function (data) { //回調函數,拿到數據後的操作 console.log(data); $(".con").html(data) //往p標籤裡面添加內容 } }) }) // 利用ajax發送數據 $(".cal").click(function () { $.ajax({ url:"/cal/", type:"get", data:{ a:1, b:2, }, success:function (data) { console.log(data) } }) })</script></body> </html>
修改視圖函數
from django.shortcuts import render,HttpResponse# Create your views here.def index(request): return render(request, "index.html")def books(request): return HttpResponse("金瓶梅")def cel(request): a = request.GET.get("a") b = request.GET.get("b") res = int(a) + int(b) return HttpResponse(str(res)
本文載自: http://www.py3study.com/Article/details/id/329.html
