Django Ajax

news/2024/11/8 16:46:50/

【一】Json

【1】介绍

  • JSON（javascript object otaition）是一种轻量级的数据交换格式
  • JSON使用了Javascript的一部分语法来定义其数据格式，但Json是独立于语言的
  • Json采用完全独立于语言的文本格式，使得Json成为理想的数据交互语言，几乎所有的现代编程语言都也有工具可以解析Json
  • 它是一种键值对形式的数据结构，易于人的阅读和编写，也易于机器的解析
  • Json格式的提出
    • 目的：取代繁琐笨重的XML格式

【2】格式

  • 属性名必须使用双引号
  • 不能使用十六进制值
  • 不能使用undefind
  • 不能使用日期和函数对象
{"name": "John Doe","age": 30,"is_student": false,"subjects": ["Math", "English", "Science"],"address": {"street": "123 Main St","city": "Anytown","state": "CA"}
}

【3】数据格式转换

请添加图片描述

【二】Ajax

【1】介绍

（1）概念

  • AJAX（全称：Asynchronous JavaScript and XML，异步的Javascript和和XML）
  • AJAX是一种无需重新加载整个页面的情况下，能够更新部分网页的技术
  • 简单说：AJAX是一种用于创动态网页的编程技术
  • 这意味着网页再被用户查看和交互的同时，可以与服务器进行数据交换和页面更新。
  • 尽管名字中含有XML，但是在实践中，数据格式通常是JSON，并非XML
  • 简单的将：异步交互、局部刷新

（2）大致工作原理

  1. 用户在浏览器进行操作（例如：点击一个按钮）
  2. Javascript创建一个XMLHttpRequest对象，然后向服务器发送请求
  3. 服务器处理这个请求
  4. 服务器将响应发送回网页
  5. Javascript读取响应，然后对网页进行响应的更新
  • 关键：
    • 关键是XMLHttpRequest对象
    • 这个对象是AJAX的主要接口，他提供了浏览器和服务器之间的进行异步通信的能力
  • 请求方式
    • 既可以发送get请求又可以发送post请求

（3）请求方式小结

  • 浏览器地址输入URL回车：GET请求
  • a标签的跳转：GET请求
  • form表单：既可以GET也可以POST
  • AJAX：既可以GET也可以POST

【2】加法案例

（1）前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width,initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script></head>
<body><div>number_one: <input type="text" id="num1"></div>
<div>number_two: <input type="text" id="num2"></div>
<div>result: <input type="text" id="result"></div>
<button id="btn_result">求和计算</button><script>{#等待页面加载完毕#}$(document).ready({#给按钮绑定事件#}$("#btn_result").click(function () {{#异步触发AJAX#}$.ajax({{#提交数数据路径， 和action一样#}url: "",{#提交方式#}type: "post",{#表示期望从数据库返回的数据类型（json、xml、script、html）#}dataType:"json",{#提交给后端的数据, 键值可以直接写#}data: {number1: $("#num1").val(),"number2": $("#num2").val()},{#回调函数，data是后端返回的数据#}success: function (data) {console.log(data, typeof data){#102 string#}$("#result").val(data)}})}))
</script></body>
</html>

（2）后端

from django.shortcuts import render, HttpResponse, JsonResponsedef home(request):if request.method == "POST":data = request.POSTprint(data)num1 = data.get("number1")num2 = data.get("number2")result = int(num1) + int(num2)return HttpResponse(result)return JsonResponse(result)return render(request, 'home.html')

（3）不同方式数据返回

  • 在Django框架中，HttpResponse和JsonResponse是两种不同的响应方式。

    • HttpResponse通常用于返回文本数据
    • JsonResponse用于返回JSON格式的数据

  • 如果后端使用HttpResponse返回数据

    • 那么数据（包括字典）将作为字符串返回，客户端（例如JavaScript）需要手动对其进行解析或反序列化。
    • 例如，如果返回的是JSON格式的字符串，那么在JavaScript中，需要使用JSON.parse()函数将其转换为JavaScript对象。
    • 或者在后端中使用json.dumps()方法将数据转换成

  • 如果后端使用JsonResponse返回数据

    • 那么Django将自动将Python字典或列表转换为JSON格式的字符串。
    • 在客户端，如果使用的是JavaScript的fetch API或jQuery的$.ajax方法（并且dataType参数被设置为'json'），那么这些函数将自动将JSON字符串转换为JavaScript对象，无需手动进行反序列化。
<script>{#等待页面加载完毕#}$(document).ready({#给按钮绑定事件#}$("#btn_result").click(function () {{#异步触发AJAX#}$.ajax({{#提交数数据路径， 和action一样#}url: "",{#提交方式#}type: "post",{#表示期望从数据库返回的数据类型（json、xml、script、html）#}dataType: "json",{#提交给后端的数据, 键值可以直接写#}data: {number1: $("#num1").val(),"number2": $("#num2").val()},{#回调函数，data是后端返回的数据#}success: function (data) {console.log(data, typeof data){#{message: 'OK', result: 7712}#}{# 'object'#}$("#result").val(data.result)}})}))
</script>

def home(request):if request.method == "POST":data = request.POSTprint(data)num1 = data.get("number1")num2 = data.get("number2")res = {"message": "OK","result": int(num1) + int(num2)}return JsonResponse(res)return render(request, 'home.html')

【三】前后端传输数据的编码格式(contentType)

  • 由于get请求数据是直接放在url后面的
    • url?username=bruce&password=123
  • 所以主要研究POST请求

【1】urlencoded

  • application/x-www-form-urlencoded（urlencoded）
    • 这是最常见的POST数据提交的方式。
    • 浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
    • 键值对都是通过**&符号分隔，键值之间等号（=**）连接。
      • 例如：key1=value1&key2=value2。

【2】formdata

  • multipart/form-data（formdata）
    • 这种数据格式通常用于文件上传。
    • 当表单中包含 <input type="file"> 时，就需要使用这种格式来提交表单。

【3】json

  • application/json（json）
    • 这种数据格式用于发送 JSON 格式的数据。
    • 在现代的Web应用中，这种格式越来越常见，特别是在构建 RESTful API 时。
    • form表单没有这种格式

【4】plain

  • 表单 <form> 的 enctype 属性还可以设置为 text/plain

  • text/plain 是一种简单的数据格式

    • 它和 application/x-www-form-urlencoded 类似
    • 但是它不对字符进行URL编码
    • 这意味着，如果你的数据中包含特殊字符（例如空格、&、=等），这些字符在 text/plain 格式中将保持原样，而不会被转换为URL编码。
      • 空格被转换为 +，@ 被转换为 %40·

  • ext/plain 格式并不常用，因为它不进行URL编码，可能会导致数据传输过程中出现问题。

【四】AJAX传输数据编码格式

【1】request补充

（1）.body

  • 在 Django 中，request.body 属性包含了 HTTP 请求的原始内容，它通常用于处理非表单数据的 POST 请求。
    • 比如，当发送 JSON、XML 或者其他类型的数据时，你会使用 request.body 来获取这些数据。
  • request.body 返回的是一个字节字符串
    • 所以如果你发送的是 JSON 数据，你需要使用 Python 的 json 模块来解析这个字节字符串
  • 需要注意的是，request.body 只能被读取一次
    • 因为它是从 socket 读取的，读取后数据就会被清空。
    • 如果试图多次读取 request.body，你会得到一个空的字节字符串。
    • 如果需要多次使用请求的数据，你需要将它保存到一个变量中。
  • 要使用尽量放在最千面

（2）.is_ajax()

  • is_ajax()是HttpRequest对象的一个方法

    • 它用于检查HTTP请求是否是一个AJAX请求。
    • 这个方法检查HTTP请求头中的X-Requested-With字段是否为XMLHttpRequest。
    • 如果是，则返回True，否则返回False。

  • 需要注意的是，is_ajax()方法并不完全可靠

    • 因为它依赖于客户端设置正确的X-Requested-With头。
    • 如果一个恶意的客户端发送一个伪造的请求，并设置X-Requested-With为XMLHttpRequest，那么is_ajax()会错误地认为这是一个AJAX请求。

【2】默认格式

（1）前端界面

<button class="btn btn=success" id="b1">Click</button><script>$(document).ready($("#b1").click(function () {$.ajax({url: "",type: "post",data: {"username": "bruce", "password": "123"},success: function (args) {}})}))
</script>

（2）后端

def home(request):body = request.bodyprint(body, type(body))if request.method == "POST":data = request.POSTprint(data, type(data))return render(request, 'home.html')
# b'username=bruce&password=123' <class 'bytes'>
# <QueryDict: {'username': ['bruce'], 'password': ['123']}> <class 'django.http.request.QueryDict'>

（3）结果

  • 默认值是 'application/x-www-form-urlencoded; charset=UTF-8'，这表示数据是以表单的形式提交的。
    • 特殊的字符串类型
    • 编码方式将每个键值对（key-value pair）转换为key=value的形式，并使用&符号连接多个键值对。

【3】Json格式

（1）前端页面

<button class="btn btn=success" id="b1">Click</button><script>$(document).ready($("#b1").click(function () {$.ajax({url: "",type: "post",contentType:"applications/json",data: JSON.stringify({"username": "bruce", "password": "123"}),success: function (args) {}})}))
</script>

（2）后端

def home(request):body = request.bodyprint(body, type(body))if request.method == "POST":data = request.POSTprint(data, type(data))if body:# 先解码json_str = body.decode('utf-8')# 类型转换json_dict = json.loads(json_str)print(json_dict, type(json_dict))return render(request, 'home.html')b'{"username":"bruce","password":"123"}' <class 'bytes'>
<QueryDict: {}> <class 'django.http.request.QueryDict'>
{'username': 'bruce', 'password': '123'} <class 'dict'>

# 在没有设置类型时
# b'{"username":"bruce","password":"123"}' <class 'bytes'>
# <QueryDict: {'{"username":"bruce","password":"123"}': ['']}> <class 'django.http.request.QueryDict'>

（3）结果

  • contentType:"applications/json"

  • 首先在没有上述设置之前

    • 默认按照urlencoded格式
    • 是特殊的字符串格式
    • 所以在POST中看到的是
      • <QueryDict: {'{"username":"bruce","password":"123"}': ['']}> <class 'django.http.request.QueryDict'>
      • 将所有的数据当成连连在一起的字符，作为一个键值传入

  • 在添加上述设置以后

    • 我们在POST中拿不到任何数据了，是一个空的querydict
    • 我们此时只能在body中拿去数据
    • 但是该数据是字节字符串
      • 所以需要先解码
      • 在使用json.loads()转换格式后
      • 才可以拿到想要的数据

【4】文件格式

（1）前端界面

<p>username: <input type="text" id="d1" name="username"></p>
<p>username: <input type="password" id="d2" name="password"></p>
<p>file: <input type="file" id="d3" name="file"></p>
<button class="btn btn-success" id="b1">submit</button><script>$("#b1").on('click', function () {{#传输文件需要内置对象formdata#}let formDataObj = new FormData();formDataObj.append('username', $("#d1").val());formDataObj.append('password', $("#d2").val());formDataObj.append('file', $("#d3")[0].files[0]);$.ajax({url: "",type: "post",data: formDataObj,{#不需要使用任何编码，django后端能自动识别formdate对象#}contentType: false,{#告诉浏览器不要对我的数据进行处理#}processData: false,success: function (args) {}})})
</script>

（2）后端

def home(request):if request.is_ajax() and request.method == "POST":print(request.POST)print(request.FILES)return render(request, 'home.html')
# <QueryDict: {'username': ['456'], 'password': ['123']}>
# <MultiValueDict: {'file': [<InMemoryUploadedFile: 53efb9d8079c6e4f904ed602f5c1e4e.png (image/png)>]}>

（3）结果

  • 想要传输文件需要

    • javascript内置对象
      • formdata
      • 可以通过append方法
      • 添加在键值对
      • 文件内容在$("#d1")[0].files[0]中
    • 两个配置
      • 不使用任何编码contentType: false，后端自动识别formdata
      • 不对数据进行任何处理：processData: false

  • 后端可以通过is_ajax和post一起来判断

    • 是否是ajax的post请求
    • 文件在request.FILES中
    • 其他键值对在request.POST中

【五】sweetleart

【1】官网

（1）sweetleart1

  • SweetAlert1
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  • 其他需要的资源
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

（2）sweetleart2

  • sweetalert2 CDN by jsDelivr - A CDN for npm and GitHub

  • SweetAlert2

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  • 其他资源对象
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

【2】使用

（1）弹框后跳转

<button class="btn btn-success" id="b1">submit</button><script>$("#b1").on('click', function () {Swal.fire({position: "top-end",icon: "success",title: "Your work has been saved",showConfirmButton: false,timer: 1500}).then(function () {$.ajax({type: "POST",url: "",data: "",success: function () {window.location.href = "https://www.baidu.com/";},});});});
</script>

（2）确认删除后跳转

  • 点击确认后将段落ID传递给后端
    • 后端返回可以的信息和新的地址
    • 然后自动跳转到新界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width,initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<p id="p1"><button class="btn btn-success" id="b1">submit</button>
</p>
<script>$("#b1").on('click', function () {Swal.fire({title: "Are you sure?",text: "You won't be able to revert this!",icon: "warning",showCancelButton: true,confirmButtonColor: "#3085d6",cancelButtonColor: "#d33",confirmButtonText: "Yes, delete it!"}).then((result) => {if (result.isConfirmed) {var pId = $("#p1").attr("id");$.ajax({type: "POST",url: "",data: {pId: pId},success: function (response) {if (response.flag) {Swal.fire({title: "Deleted!",text: "Your file has been deleted.",icon: "success"}).then(() => {window.location.href = response.url;});}},});}});});
</script>
</body>
</html>

def home(request):if request.is_ajax() and request.method == "POST":data_dict = {"flag": True, "url": "https://www.baidu.com/"}return JsonResponse(data_dict)return render(request, 'home.html', locals())

【六】序列化组件

【0】前言

（1）为啥要用

  • 目前我们可以在后端通过models获得queryset对象

    • 然后直接用locals()直接传送给前端

  • 但是在前后端分离项目中

    • queryset对象的内容格式是多种多样的

    • 前端工程师无法简单的了解你的数据格式

    • 所以需要一种统一的格式

    • 一般都是将数据处理成列表套字典的形式

    • [{}, {}, {}...]

（2）模型数据准备

  • 模型
from django.db import models# Create your models here.
class User(models.Model):name = models.CharField(max_length=32)age = models.IntegerField(null=True)gender_choices = ((1, "男"),(2, "女"),(3, "保密"),)gender = models.IntegerField(choices=gender_choices, default=3)
  • 批量添加数据(后续具体讲解)
import random
from django.test import TestCase
# Create your tests here.
import osif __name__ == '__main__':"""Run administrative tasks."""os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'django_test.settings')import djangodjango.setup()from app01 import models
user_list = []
for i in range(5):obj = models.User(name=f"bruce{i}", age=20+i, gender=random.choice([1, 2, 3]))user_list.append(obj)
models.User.objects.bulk_create(user_list)

【1】JsonResponse

  • 后端发送数据
def home(request):user_queryset = models.User.objects.all()user_list = []for user_obj in user_queryset:user_dict = {"name": user_obj.name,"age": user_obj.age,"gender": user_obj.gender}user_list.append(user_dict)return JsonResponse(user_list, safe=False)
  • 前端拿到的数据格式
[{"name": "bruce0","age": 20,"gender": 2},{"name": "bruce1","age": 21,"gender": 1},{"name": "bruce2","age": 22,"gender": 2},{"name": "bruce3","age": 23,"gender": 3},{"name": "bruce4","age": 24,"gender": 2}
]

【2】serializers组件

  • 后端
from django.core import serializers
def home(request):user_queryset = models.User.objects.all()user_str = serializers.serialize('json', user_queryset)print(type(user_str))# <class 'str'>return HttpResponse(user_str)
  • 前端
    • 这里面的信息就更加丰富了
    • 有model、pk和fields
    • 其中fields中是模型型中的具体数据
[{"model": "app01.user", "pk": 1, "fields": {"name": "bruce0", "age": 20, "gender": 2}}, {"model": "app01.user", "pk": 2, "fields": {"name": "bruce1", "age": 21, "gender": 1}}, {"model": "app01.user", "pk": 3, "fields": {"name": "bruce2", "age": 22, "gender": 2}}, {"model": "app01.user", "pk": 4, "fields": {"name": "bruce3", "age": 23, "gender": 3}}, {"model": "app01.user", "pk": 5, "fields": {"name": "bruce4", "age": 24, "gender": 2}}]

【3】小结

  • JsonResponse
    • 为了统一的列表套字典格式
    • 需要手动创建该格式
  • serializers
    • 首先需要导入模块
    • 然后用模块转换数据格式
    • 最后HttpResponse传输数据
  • 都有的问题
    • 这里的性别在前端开来，只有三个数字
    • 不知具体含义
    • 所有都还需要有一个具体字段数值说明书

http://www.ppmy.cn/news/1394644.html

相关文章

Matlab|【免费】基于数据驱动的模型预测控制电力系统机组组合优化

Matlab|【免费】基于数据驱动的模型预测控制电力系统机组组合优化

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现文章《Feature-Driven Economic Improvement for Network-Constrained Unit Commitment: A Closed-Loop Predict-and-Optimize Framework》&#xff0c;程序主要做的是一个基于数据驱动的电力系统机…
阅读更多...
信号处理--使用EEGNet进行BCI脑电信号的分类

信号处理--使用EEGNet进行BCI脑电信号的分类

目录 理论 工具 方法实现 代码获取 理论 EEGNet作为一个比较成熟的框架&#xff0c;在BCI众多任务中&#xff0c;表现出不俗的性能。EEGNet 的主要特点包括&#xff1a;1&#xff09;框架相对比较简单紧凑 2&#xff09;适合许多的BCI脑电分析任务 3&#xff09;使用两种卷…
阅读更多...
深入探索C语言动态内存分配：释放你的程序潜力

深入探索C语言动态内存分配：释放你的程序潜力

&#x1f308;大家好&#xff01;我是Kevin&#xff0c;蠢蠢大一幼崽&#xff0c;很高兴你们可以来阅读我的博客&#xff01; &#x1f31f;我热衷于分享&#x1f58a;学习经验&#xff0c;&#x1f3eb;多彩生活&#xff0c;精彩足球赛事⚽ &#x1f31f;感谢大家的支持&#…
阅读更多...
【boost_search搜索引擎】1.获取数据源

【boost_search搜索引擎】1.获取数据源

boost搜索引擎 1、项目介绍2、获取数据源 1、项目介绍 boost_search项目和百度那种不一样&#xff0c;百度是全站搜索&#xff0c;而boost_search是一个站内搜索。而项目的宏观上实现思路就如同图上的思路。 2、获取数据源 我们要实现一个站内搜索&#xff0c;我们就要有这…
阅读更多...
浅易理解：YoloV3 案例_05

浅易理解：YoloV3 案例_05

目标 熟悉TFRecord文件的使用方法YoloV3模型结构及构建方法数据处理方法利用yoloV3模型进行训练和预测 1.TFrecord文件 该案例中我们依然使用VOC数据集来进行目标检测&#xff0c;不同的是我们要利用tfrecord文件来存储和读取数据&#xff0c;首先来看一下tfrecord文件的相关…
阅读更多...
[AIGC] Redis基础命令集详细介绍

[AIGC] Redis基础命令集详细介绍

Redis是一个强大的开源的键-值存储系统&#xff0c;被广泛应用于各种应用程序中。在使用Redis时&#xff0c;我们需要掌握一些基本的Redis命令来操作存储在其上的数据。这篇文章将向你介绍一些基本的Redis命令&#xff0c;让你能够更好地使用和理解Redis。 文章目录 启动Redis…
阅读更多...
yolov5/v7修改标签和检测框显示【最全】

yolov5/v7修改标签和检测框显示【最全】

1. 背景介绍 在计算机视觉领域&#xff0c;目标检测是一个重要的任务&#xff0c;它旨在识别图像中的对象并定位它们的边界框。近年来&#xff0c;基于深度学习的目标检测算法取得了显著的进展&#xff0c;其中YOLO&#xff08;You Only Look Once&#xff09;系列算法因其速度…
阅读更多...
nodejs+vue分类信息服务平台移动端的设计与实现-安卓pythonflask-django-php

nodejs+vue分类信息服务平台移动端的设计与实现-安卓pythonflask-django-php

分类信息服务平台设计的目的是为用户提供活动信息、活动记录等方面的平台。 与PC端应用程序相比&#xff0c;分类信息服务平台的设计主要面向于移动端&#xff0c;旨在为管理员和用户、商铺提供一个分类信息服务平台。用户可以通过Android及时查看活动信息等。 分类信息服务平台…
阅读更多...
最新文章

Copyright @ 2022~2023