【Django】教程-1-安裝+創建項目+目錄結構介紹
【Django】教程-2-前端-目錄結構介紹
【Django】教程-3-數據庫相關介紹
【Django】教程-4-一個增刪改查的Demo
【Django】教程-5-ModelForm增刪改查+規則校驗【正則+鉤子函數】
【Django】教程-6-搜索框-條件查詢前后端
【Django】教程-7-分頁，默認使用django的
【Django】教程-8-頁面時間組件
【Django】教程-9-登錄+退出

16. ajax

16.1 GET請求

login目錄text.html

{% extends 'login/layout.html' %}
{% block content %}<h3>示例 1</h3><input id="btn1" type="button" class="btn-primary" value="點擊1" onclick="clickMe();"/>{% endblock %}{% block js %}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="text/javascript">function clickMe() {console.log("進來了")$.ajax({url: '/task/ajax/',type: 'get',data: {n1: 123,n2: 456},success: function (res) {console.log(res);}})}</script>
{% endblock %}

views目錄account.py文件

def task_list(r):"顯示一個頁面，用于ajax"return render(r, 'login/test.html')
def task_ajax(req):print(req.method)print(req.GET.get('n1'))return HttpResponse("成功了!")

urls.py

from django.urls import path
from appTang.views import department_views, user_views, admin_views, account# 映射關系，視圖--->函數
urlpatterns = [path('task/list', account.task_list),path('task/ajax/', account.task_ajax),]

16.1 POST請求

{% block js %}<script type="text/javascript">function clickMe() {console.log("進來了")$.ajax({url: '/task/ajax/',type: 'post',data: {n1: 123,n2: 456},success: function (res) {console.log(res);}})}</script>
{% endblock %}

from django.views.decorators.csrf import csrf_exempt@csrf_exempt # 對單個函數關掉，csrf校驗
def task_ajax(req):print(req.method)print(req.POST)return HttpResponse("成功了!")

16.3 綁定事件

{% block js %}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function (){// 頁面框架加載完成之后，代碼自動執行bindBtnEvent();})function bindBtnEvent(){{# 可以，發送ajax請求 #}$.ajax({url: '/task/ajax/',type: 'post',data: {n1: 123,n2: 456},success: function (res) {console.log(res);}})}</script>
{% endblock %}

16.4 ajax請求返回值

ajax 通常都是返回json格式數據

data_dict = {"status": True, "data": [11, 22, 33, 44]}
# 兩種方式都可以
# json_string = json.dumps(data_dict)
# return HttpResponse(json_string)return JsonResponse(data_dict)

$.ajax({url: '/task/ajax/',type: 'post',data: {n1: 123,n2: 456},{# 將返回值，變成json對象 ，后面可以直接 .屬性#}dataType: "JSON", success: function (res) {console.log(res);console.log(res.data);}
})

16.5 表單提交

兩種方式，一種form，一種一個一個的val

$(“#form3”).serialize()

n1: $(“#txtUser”).val(),

{% extends 'login/layout.html' %}
{% block content %}<div><div class="container"><h3>示例2 </h3><input type="text" id="txtUser" placeholder="姓名"/><input type="text" id="txtAge" placeholder="年齡"/><input type="button" id="btn2" class="btn btn-primary" value="點擊2"/><h3>示例3 </h3><form id="form3"><input type="text" name="username" placeholder="姓名"/><input type="text" name="age" placeholder="年齡"/><input type="text" name="email" placeholder="郵箱"/><input type="text" name="more" placeholder="簡介"/></form><input type="button" id="btn3" class="btn btn-primary" value="點擊3"/></div></div>
{% endblock %}
{% block js %}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {bindBtn2Event();bindBtn3Event();})function bindBtn2Event() {$("#btn2").click(function () {$.ajax({url: '/task/ajax/',type: 'post',data: {n1: $("#txtUser").val(),n2: $("#txtAge").val(),},dataType: "JSON",success: function (res) {console.log(res);console.log(res.status);}})})}function bindBtn3Event() {$("#btn3").click(function () {$.ajax({url: '/task/ajax/',type: 'post',data: $("#form3").serialize(),dataType: "JSON",success: function (res) {console.log(res);console.log(res.data);}})})}</script>
{% endblock %}