【Django】教程-10-ajax请求Demo，结合使用

【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 %}