当前位置：首页 > news >正文

Django环境下使用Ajax

news 2025/8/26 18:36:11

Django环境下使用Ajax

介绍

AJAX 的主要目标是在不刷新整个页面的情况下，通过后台与服务器进行数据交换和更新页面内容。通过 AJAX，您可以向服务器发送请求并接收响应，然后使用 JavaScript 动态地更新页面的部分内容

简单来说就是将后端数据进行加工后传给前端，再利用js对数据进行加工或判断后渲染到前端

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行，AJAX 使用异步交互与服务器进行通信

同步交互：
- 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：
- 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

前情提要

常见的发送请求方式：

浏览器地址直接输入url回车
- GET请求
a标签的href属性
- GET请求/POST请求
form表单
- GET请求/POST请求
Ajax
- GET请求/POST请求

示例

预期效果

JS实现

<body>
<input type="text" id="num1">+
<input type="text" id="num2">=<input type="text" id="num3"><br>
<button id="b1">点我计算结果</button><script>document.getElementById('b1').addEventListener('click', function () {var num1 = document.getElementById('num1').valuevar num2 = document.getElementById('num2').valuevar sum = parseInt(num1) + parseInt(num2)document.getElementById('num3').value = sum})
</script>
</body>

Ajax实现

将要计算的参数通过data传递给后端

再由success接受后端返回的数据进行渲染

<body>
<input type="text" id="num1">+
<input type="text" id="num2">=<input type="text" id="num3"><br>
<button id="b1">点我计算结果</button><script>document.getElementById('b1').addEventListener('click', function () {var num1 = document.getElementById('num1').valuevar num2 = document.getElementById('num2').value$.ajax({{#url：指定当前数据提交的网址,如果不写就和form表单的action一样，默认释放前路由地址#}url:'',{#type：请求类型 GET / POST 默认是GET#}type:'post',{#data：传给后端的数据#}data:{'num1':num1,'num2':num2,},{#success：回调函数 接受后端传过来的数据#}success:function (data){console.log(data)document.getElementById('num3').value = data}})})
</script>
</body>

后端接受到data数据并返回sum参数

def test(request):if request.method == 'POST':data = request.POSTnum1 = data.get('num1')num2 = data.get('num2')sum = int(num1) + int(num2)return HttpResponse(sum)return render(request, 'app01/test.html', locals())

传递JSON格式数据

success获取由后端返回的数据并使用JSON.parse(data)进行数据转换，这样便可以直接用.属性获取参数
JSON.stringify：ajax中将需要传递的数据转换成json类型
json.loads(request.body.decode())：后端接受数据时需要通过request.body来获取请求体，然后loads手动解析json数据

<body>
<input type="text" id="num1">+
<input type="text" id="num2">=<input type="text" id="num3"><br>
<button id="b1">点我计算结果</button><script>document.getElementById('b1').addEventListener('click', function () {var num1 = document.getElementById('num1').valuevar num2 = document.getElementById('num2').value$.ajax({{#url：指定当前数据提交的网址,如果不写就和form表单的action一样，默认释放前路由地址#}url: '',{#type：请求类型 GET / POST 默认是GET#}type: 'post',{#data：以json格式传递给后端数据#}data: JSON.stringify({'num1': num1,'num2': num2,}),{#success：回调函数 接受后端传过来的数据#}success: function (data) {var new_data = JSON.parse(data)if (new_data.code != 200) {alert('非法数据')} else {console.log(data)document.getElementById('num3').value = new_data.sum}}})})
</script>
</body>

接受数据并返回json格式数据(主力这里回调函数用的是data.参数)

def test(request):if request.method == 'POST':# 提取json数据必须通过request.body获取请求体 并手动解析 JSON 数据data = json.loads(request.body.decode())num1 = data.get('num1')num2 = data.get('num2')sum = int(num1) + int(num2)# HttpResponse发送给前端的是str对象 需要在success重新转换类型return HttpResponse(json.dumps({'code':200,'sum':sum}))return render(request, 'app01/test.html', locals())

传递文件数据

<script>$(document).ready($("#btn_result").click(function () {let numberOne = $("#number1").val();let numberTwo = $("#number2").val();let fileVal = $("#file_input")[0].files[0];// Ajax携带文件数据需要借助第三方的 formData对象// （1）实例化得到一个 form对象// 将所有的键值对数据都要放到 form对象中let formDataObj = new FormData();formDataObj.append("numberOne", numberOne)formDataObj.append("numberTwo", numberTwo)formDataObj.append("file", fileVal)console.log(fileVal)console.log(formDataObj)// 基于Ajax发送请求$.ajax({// url：指定当前数据提交的网址,如果不写就和form表单的action一样，默认释放前路由地址url: "",// type：请求类型 GET / POST 默认是GETtype: "post",// data：传给后端的数据//（1）传输的data直接放上面的 form对象即可data: formDataObj,//（2）走form对象不能让他使用编码对数据进行编码contentType: false, // 默认编码是 urlencoded//（3）告诉浏览器不要对数据进行额外的处理processData: false,{#data: {'number_one': numberOne, "number_two": numberTwo},#}// success：回调函数 接受后端传过来的数据success: function (data) {console.log(data)console.log(typeof (data))// 使用 js自己的序列化方法序列化数据{#let dataVal = JSON.parse(data)#}console.log(typeof (data))if (data.code === 200) {$("#result").val(data.result)} else {alert("非法的数据")}}})}))
</script>

def test(request):if request.method == "POST":# 可以用来判断当前的请求方式是否是Ajaxprint(request.is_ajax()) # True# print(type(request.body.decode("utf-8")[0]))# 获取普通的键值对数据只需要通过 POST方法data = request.POSTprint(data)  # <QueryDict: {'numberOne': ['2'], 'numberTwo': ['2']}># 获取form对象中的文件数据也要借助 FILESprint(request.FILES)  # <MultiValueDict: {'file': [<InMemoryUploadedFile: avatar.jpg (image/jpeg)>]}>return JsonResponse({"code": 200, "result": "ok"})return render(request, "app01/test.html", locals())

Django自带的序列化组件

什么是序列化？

就是当我想要从数据库提取出数据后将数据对象转换为可以直接使用的数据的过程

基于jsonresponse序列化数据

from app01.models import Userdef get_user(request):# 查询所有的用户数据user_data_list = []# 此时获取到的是对象数据<QuerySet [<Author: Author object (1)>, <Author: Author object (2)>]>user_queryset = User.objects.all()# 将数据字段提取后装进列表for user_obj in user_queryset:user_data_list.append({"username": user_obj.username,"age": user_obj.age,"gender": user_obj.get_gender_display(),})print(user_data_list)# 将列表返回前端return JsonResponse(user_data_list,safe=False)

[{'username': 'drema', 'age': 18, 'gender': 'female'}, {'username': 'opp', 'age': 28, 'gender': 2}, {'username': 'hope', 'age': 38, 'gender': 'female'}]

基于Django自带的serializers

需要导入serializers模块

from app01 import models
from django.core import serializersdef test(request):author = models.Author.objects.all()author_list = serializers.serialize("json", author)print(author_list)return JsonResponse(user_data_list, safe=False)

[{"model": "app01.author", "pk": 1, "fields": {"name": "张三", "age": 11, "gender": 2}}, {"model": "app01.author", "pk": 2, "fields": {"name": "李四", "age": 19, "gender": 2}}]

注册示例

# 前端
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    引入jQuery--><script src="{% static 'js/jquery.js' %}"></script><!--    引入Bootstrap的CSS文件--><link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"><!--    引入Bootstrap的JavaScript文件--><script src="{% static 'js/bootstrap.js' %}"></script><style>/* 左侧空白区域 */.left-section {background-color: dimgrey;width: 25%;height: 100vh;position: fixed;top: 0;left: 0;}/* 右侧空白区域 */.right-section {background-color: dimgrey;width: 25%;height: 100vh;position: fixed;top: 0;right: 0;}.d1 {position: fixed;left: 35%;}.form-control:focus {outline: none;box-shadow: 0 0 5px cornflowerblue;}.btn-default + .btn-primary {margin-left: 150px; /* 调整为所需的间距 */}</style>
</head>
<body>
<div class="left-section"></div>
<div class="right-section"></div>
<div class="d1">
{#    <form action="" method="post">#}<div class="form-group"><label for="username">用户名</label><br><input type="text" class="form-control" id="username" placeholder="Username"><br><hr></div><div class="form-group"><label for="pwd">密码</label><br><input type="password" class="form-control" id="password" placeholder="Password"><br><hr></div><div class="form-group"><label for="pwd2">再次输入密码</label><br><input type="password" class="form-control" id="password2" placeholder="Password"><br></div><button type="reset" class="btn btn-default">重置</button><button class="btn btn-primary" id="b1">确认</button>
{#    </form>#}
</div><script>var b1 = document.getElementById("b1")$(document).ready(function () {b1.addEventListener('click', function () {$.ajax({url: '',type: 'post',data: JSON.stringify({'username': document.getElementById("username").value,'password': document.getElementById("password").value,'password2': document.getElementById("password2").value}),contentType: 'application/json',success: function (data) {alert(JSON.parse(data.state))},error: () => {console.log('错误')}})})})</script>
</body>
</html>

# 后端
def register(request):if request.method == 'POST' and request.is_ajax():# data = request.POSTdata = json.loads(request.body.decode())print(data)username = data.get('username')password = data.get('password')print(username, password)# models.User.objects.create(username=username,password=password)state = {'state': 200}return JsonResponse(state)return render(request, 'app01/register.html')