Django环境下使用Ajax

Django环境下使用Ajax

目录

  • Django环境下使用Ajax
    • 介绍
    • 前情提要
    • 示例
        • JS实现
        • Ajax实现
    • 传递JSON格式数据
    • 传递文件数据
    • Django自带的序列化组件
      • 基于jsonresponse序列化数据
      • 基于Django自带的serializers
    • 注册示例

介绍

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

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

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

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

前情提要

常见的发送请求方式:

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

示例

预期效果

image-20240309195930986

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')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面具安装LSP模块时提示 Unzip error错误的解决办法

面具(Magisk Delta)安装LSP模块时提示 Unzip error错误的解决办法 ​​ 如果前面的配置都正常的话&#xff0c;可能是LSP版本有问题重新去Github下载一个最新版的吧&#xff1b;我是这么解决的。 我安装1.91那个版本的LSP就是死活安装不上&#xff0c;下载了1.92的版本一次就…

FTP,SFTP,FTPS,SSL,TSL简介,区别,联系,使用场景说明

文章目录 简介FTPFTPSSFTP加密场景选择FTPS还是SFTPFTP、SFTP、FTPS区别、联系和具体使用场景如何使用FTP、SFTP和FTPSSSLTLSSSL和TLS区别和联系&#xff0c;以及使用场景SSL和TLS技术上的区别一些问题隐式的TLS&#xff08;FTPS/SSL&#xff09;或者显式的TLS&#xff08;FTPS…

[密码学]Base64编码

一、相关指令 1. 查看工具版本号 base64 --version2. 对字符串加密 echo 字符串 | base64 echo "Hello base64" | base643. 对字符串解密 echo 字符串 |base64 -d echo "SGVsbG8gTGV0aWFuLVJTQQo" | base64 -d4. 对文件加密 base64 文件名 base64 tex…

搭建交换机模拟环境及SSH连接,华为NSP软件入门使用教程

搭建交换机模拟环境及SSH连接&#xff0c;华为NSP软件入门使用教程 如果你是通过搜索搜到了这篇文章&#xff0c;那么一定是工作或者学习中需要用交换机&#xff0c;但是又没物理机测试学习&#xff0c;所以需要搭建本地的虚拟环境学习。 这篇文章是我进行交换机命令入门学习写…

使用Flask快速搭建轻量级Web应用【第119篇—Flask】

使用Flask快速搭建轻量级Web应用 在Web开发领域&#xff0c;选择适合项目需求的框架至关重要。Flask&#xff0c;一个轻量级的Python Web框架&#xff0c;以其简洁、灵活和易扩展的特性而备受开发者青睐。本文将介绍如何使用Flask迅速搭建一个轻量级的Web应用&#xff0c;并通过…

js导出的excel文件无法打开/打开乱码,excel无法打开xxx.xlsx因为文件格式或文件扩展无效

excel无法打开xxx.xlsx因为文件格式或文件扩展无效 使用 a 标签导出这里就不细说了&#xff0c;直接说上述问题解决方案 在调用导出接口的时候加上两个参数 responseType: “blob” responseEncoding: “utf8” export function test(data) {return util({url: /test,method: …

04-微服务 面试题

1.Spring Cloud 常见的组件有哪些? Spring Cloud 5大组件有哪些? 基础的内容考察回答原则:简单的问题不能答错(一道面试题就能淘汰一个人)新手和老手都要注意面试参考回答: 面试官:Spring Cloud 5大组件有哪些? 候选人:早期我们一般认为的Spring Cloud五大组件是 …

【C++】反向迭代器仿函数模板进阶

反向迭代器&仿函数&模板进阶 一&#xff0c;反向迭代器1. 什么是反向迭代器2. 模拟实现3. 如何使用 二&#xff0c;仿函数1. 仿函数的概念2. 仿函数的用法 三&#xff0c;模板1. 非类型模板参数2. 模板的特化2.1 特化概念2.2 函数模板特化2.3 类模板特化2.3.1 全特化2.…

Flink 性能优化总结(内存配置篇)

内存配置优化 Flink 内存模型 内存模型详解 进程内存&#xff08;Total Process Memory&#xff09;&#xff1a;Flink 进程内存分为堆上内存和堆外内存&#xff0c;堆上内存和 堆外内存的主要区别在于它们的管理方式不同和使用方式不同&#xff0c;这些会影响到它们的性能和…

中兴R5300G4无法识别全部硬盘与服务器Smart31002100RAID卡修改端口模式配置方法

中兴R5300G4无法识别全部硬盘&#xff0c;需要启动UEFI模式。 问题描述 硬盘配置RAID或者HBA直通模式需要修改RAID卡的端口模式。 本文介绍服务器分别在legacy、UEFI模式下的配置方法。 适用产品 R5300 G4、R5500 G4、R8500 G4 解决方案 一&#xff0e;Legacy启动模式&#x…

《剑指 Offer》专项突破版 - 面试题 77 和 78 : 详解归并排序(C++ 实现)

目录 归并排序详解 递归实现 迭代实现 面试题 77 : 链表排序 面试题 78 : 合并排序链表 法一、利用最小堆选取值最小的节点 法二、按照归并排序的思路合并链表 归并排序详解 归并排序就是将两个或两个以上的有序表合并成一个有序表的过程。将两个有序表合并成一个有序表…

机器学习-04-分类算法-01决策树案例

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中分类算法&#xff0c;本篇为分类算法开篇与决策树部分。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程…

redis 缓冲区详解(性能优化缓冲区优化)

目录 前言 客户端输入缓冲区 输出缓冲区 集群缓冲区 全量复制缓冲区问题 增量复制缓冲区问题 前言 在我的《Redis 为啥那么快》这篇文章中&#xff0c;详细总结了Redis 为啥那么快。今天当我要详细阐述Redis 的缓冲区时&#xff0c;意识到应该加上Redis 的缓冲区。我们假…

01_04_JavaWEB03_XML、Tomcat、http

XML_Tomcat10_HTTP 参考尚硅谷再总结复习 一 XML XML是EXtensible Markup Language的缩写&#xff0c;翻译过来就是可扩展标记语言。所以很明显&#xff0c;XML和HTML一样都是标记语言&#xff0c;也就是说它们的基本语法都是标签。 可扩展 三个字表面上的意思是XML允许自定义…

VBA combox/listbox 控件响应鼠标滚轮事件

在vba中&#xff0c;我们在用户窗体中如果添加有combox控件&#xff0c;或者是listbox控件。正常情况下&#xff0c;combox 和 listbox 是不响应鼠标滚轮事件的&#xff0c;且默认的VBA控件中&#xff0c;也没有提供响应鼠标滚轮事件的方法和入口。如此以来&#xff0c;我们在c…

【毕设级项目】基于AI技术的多功能消防机器人(完整工程资料源码)

基于AI技术的多功能消防机器人演示效果 竞赛-基于AI技术的多功能消防机器人视频演示 前言 随着“自动化、智能化”成为数字时代发展的关键词&#xff0c;机器人逐步成为社会经济发展的重要主体之一&#xff0c;“机器换人”成为发展的全新趋势和时代潮流。在可预见的将来&#…

Adobe Photoshop 2024 v25.5.1 for mac 强大的图形编辑工具 兼容 M1/M2/M3

Mac毒搜集到的Adobe Photoshop 2024 v25.5.1 是一款强大的图形编辑和设计工具! v25.5.1版本AI生成式无法使用 应用介绍 Adobe Photoshop 2024是一款强大的图像处理软件&#xff0c;由Adobe公司开发。它可以用于编辑和处理照片、图形和其他类型的图像&#xff0c;包括设计、绘画…

Java双非大二找实习记录

先说结论&#xff1a;2.22→3.6线上线下面了七家&#xff0c;最后oc两家小公司&#xff0c;接了其中一个。 本人bg&#xff1a; 真名不经传双非一本&#xff0c;无绩点无竞赛无奖项无实习&#xff0c;23年12月开始学java。若非要说一点相关的经历&#xff0c;就是有java基础&…

XWPFDocument中XmlCursor的使用

类名&#xff1a; org.apache.xmlbeans Interface XmlCursor版本&#xff1a; 原xml代码&#xff1a; <w:p w14:paraId"143E3662" w14:textId"4167FBA7" w:rsidR"001506F2" w:rsidRPr"003F3D89" w:rsidRDefault"001506F2&qu…

Python3虚拟环境之virtualenv

virtualenv 在开发Python应用程序的时候&#xff0c;系统安装的Python3只有一个版本&#xff1a;3.7。所有第三方的包都会被pip安装到Python3的site-packages目录下。 如果要同时开发多个应用程序&#xff0c;这些应用程序都会共用一个Python&#xff0c;就是安装在系统的Pyt…