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

前端知识笔记（二）———Django与Ajax

news 2025/7/7 13:18:33

特点：

        异步提交

        局部刷新

例子：github注册

动态获取用户名实时的跟后端确认并实时的展示到前端（局部刷新） 

朝后端发送请求的方式
        1.浏览器地址栏直接输入url回车 -----》get请求

        2.a标签的href属性  -----》get请求

        3.form表单 -----》get请求、post请求

        4.ajax -----》 get请求、post请求

真正的ajax原生，需要使用js操作，jq的ajax方法是对原生js的封装，方便咱们使用

（其他框架也可以，原理是一样的）

前后端混合项目中，我们通常使用jq的ajax实现 js和后端异步交互
        jq操作dom
        jq发ajax请求
前后端分离项目中，我们会使用另一个第三方库，实现 js和后端异步交互（axios）
 

写一个例子：

页面上有三个input框，前两个框输入数字，点击提交，朝后端发送ajax请求，后端计算出结果再返回给前端，动态展示到第三个input框中，整个页面不能刷新，也不能在前端计算

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<button id="btn">提交</button>
<script>// 先给按钮一个点击事件$('#btn').click(function (){// 朝后端发送ajax请求$.ajax({// 1.指定朝哪个后端发送ajax请求url:'', // 不写就是朝当前地址提交// 2.请求方式type:'post', // 不指定就是get，都是小写// 3.数据data:{'l1':$('#d1').val(),'l2':$('#d2').val()},// 4.回调函数:当后端给你返回结果的时候会自动触发 args接收后端返回的结果success:function (args) {$('#d3').val(args)}})})
</script>
</body>
</html>

views代码

from django.shortcuts import render,HttpResponsedef ab_ajax(request):if request.method=='POST':l1 = request.POST.get('l1')l2 = request.POST.get('l2')#先转成整型再加l3=int(l1)+int(l2)return HttpResponse(l3)return render(request,'ajax.html')

前后端传输数据的编码格式（contentType）
因为get请求数据就是直接放在url后面的（url?user=kk$pwd=123），所以主要看下post请求的编码格式

向后端发送post请求的方式
        1.form表单

        2.ajax请求

前后端传输数据的编码格式

        urlencoded

        formdata

        json

        form表单

默认的编码格式是urlencoded

数据格式：user=kk&pwd=123        

Django后端针对符合urlencoded编码格式的数据会自动帮你解析封装到request.POST中 

user=kk&pwd=123     --------》   request.POST

如果把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中， 而将文件解析到request.FILES中

form表单是没办法发送json格式数据的 

ajax默认的编码格式是urlencoded

ajax发送json格式数据
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="d1">点我</button>
<script>$('#d1').click(function () {$.ajax({url:'',type:'post',data:JSON.stringify({'username':'kk','age':12}),contentType:'application/json',  //指定编码格式success:function () {}})})
</script>
</body>
</html>

ajax发送json格式数据需要注意点

        1.contentType参数指定成：applicaton/json

        2.数据是真正的json格式数据

        3.Django后端不会帮你处理json格式数据，需要你自己去request.body获取并处理

ajax发送文件
1.  ajax发送文件需要借助于js内置对象FormData

html
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>username<input type="text" id="d1"></p>
<p>password<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button id="d4">点我</button>
<script>//点击按钮朝后端发送普通键值对和文件数据$('#d4').on('click',function () {//需要先利用FormData内置对象let formDataObj=new FormData();//2 添加普通的键值对formDataObj.append('username',$('#d1').val());formDataObj.append('password',$('#d2').val());//3添加文件对象formDataObj.append('myfile',$('#d3')[0].file[0]);//4将对象基于发送给后端$.ajax({url:'',type:'post',data:formDataObj, //直接将对象放在data后面即可//ajax发送文件必须指定两个参数contentType:false, //不需使用任何编码，Django后端都能自动识别formdata对象processData: false, //告诉你的浏览器不要对你的数据进行任何处理success:function () {}})})
</script>
</body>
</html>

2.  ajax发送文件必须指定两个参数：
            contentType:false,  //不需使用任何编码，Django后端都能自动识别formdata对象
            processData: false,  //告诉你的浏览器不要对你的数据进行任何处理
3.  Django后端能够直接识别formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中，文件数据自动解析并封装到request.FILES中

相关文章：

前端知识笔记（二）———Django与Ajax

特点&#xff1a; 异步提交 局部刷新 例子&#xff1a;github注册 动态获取用户名实时的跟后端确认并实时的展示到前端&#xff08;局部刷新&#xff09; 朝后端发送请求的方式 1.浏览器地址栏直接输入url回车 -----》get请求 2.a标签的href属性 -----》get请求 3…...

编程日记 2023/12/13 14:30:57

C++新经典模板与泛型编程：用成员函数重载实现is_base_of

用成员函数重载实现is_base_of std::is_base_of是一个C 11标准中用于判断某个类是否是另一个类父类的类模板。 #include "killCmake.h"#include<string>using namespace std;class A { };class B : public A { public:B(int x): x_(x){} private:int x_; };/…...

编程日记 2023/12/13 14:29:56

【vue3】处理数组方法，在数组中获取指定条件所在的数组对象等持续更新笔记~~

1、在数组中获取指定条件所在的数组对象 &#xff08;1&#xff09;filter方法获取到的是包含指定项的数组 data.checkRow res.result.filter(item > item.checked 1);打印&#xff1a; &#xff08;2&#xff09;map方法取到的是包含指定项的数组&#xff0c;如果满足…...

编程日记 2023/12/13 14:27:54

digit函数

题目描述 在程序中定义一函数 digit(n,k)&#xff0c;它能分离出整数 n 从右边数第 k 个数字。 输入格式 正整数 n 和 k。 输出格式 一个数字。 输入输出样例 输入 #1 31859 3 输出 #1 8 说明/提示 n≤10^9。 k≤10。 因为用整数n来做有点难&#xff0c;所以我用…...

编程日记 2023/12/13 14:23:51

Linux中的堡垒机搭建以及使用

JumpServer搭建 安装应用包 curl -sSL https://resource.fit2cloud.com/jumpserver/jumpserver/releases/latest/download/quick_start.sh | bash 一路回车即可安装完毕&#xff08;可根据需求更改&#xff09; JumpServer的 配置文件路径 /opt/jumpserver/config/config.tx…...

编程日记 2023/12/13 14:21:48

ubuntu安装微信客户端

安装 Wine 环境 Wine环境包下载地址&#xff1a;http://archive.ubuntukylin.com/software/pool/partner/ukylin-wine_70.6.3.25_amd64.deb 下载完安装包后在命令行运行以下命令安装环境&#xff1a; sudo apt-get install -f -y ./ukylin-wine_70.6.3.25_amd64.deb 安装微信…...

编程日记 2023/12/13 14:16:44

ajax清空所有表单内容，包括input标签、单选框radio、多选框CheckBox、下拉框select以及文本域内容

为了实现重置并清空表单内容&#xff0c;你可以使用 jQuery 的 val 方法将各种表单元素的值设置为空字符串&#xff0c;并通过 layui 的 form.render 方法来更新表单的渲染。以下是修改后的代码&#xff1a; layui.use(["form", "laydate", "jquery&…...

编程日记 2023/12/13 14:15:43

通配符用法

在本篇文章中&#xff0c;本文将说明通配符用法。 &#xff08;1&#xff09;概述 通配符是在Linux命令中用于匹配文件名的特殊字符。它们可以帮助我们快速定位和操作文件。本文将介绍一些常用的通配符及其示例用法。 通配符是一种用于模式匹配的特殊字符。在计算机领域中&am…...

编程日记 2023/12/13 14:14:41

如何从eureka-server上进行服务发现，负载均衡远程调用服务

在spring cloud的maven的pom文件中添加eureka-client的依赖坐标 <!--eureka-client依赖--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-client</artifactId></dependen…...

编程日记 2023/12/13 14:13:39

Flutter实现Android拖动到垃圾桶删除效果-Draggable和DragTarget的详细讲解

文章目录 Draggable介绍构造函数参数说明使用示例 DragTarget 介绍构造函数参数说明使用示例 DragTarget 如何接收Draggable传递过来的数据&#xff1f; Draggable介绍 Draggable是Flutter框架中的一个小部件&#xff0c;用于支持用户通过手势拖动一个子部件。它是基于手势的一…...

编程日记 2023/12/13 14:11:38

Nacos和Eureka冲突问题原因分析

目录 一、问题现象二、解决办法三、原因分析 一、问题现象 Description:Field autoServiceRegistration in org.springframework.cloud.client.serviceregistry.AutoServiceRegistrationAutoConfiguration required a single bean, but 2 were found:- eurekaAutoServiceRegis…...

编程日记 2023/12/13 14:10:37

『C++成长记』拷贝构造函数

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、拷贝构造函数 &#x1f4d2;1.1拷贝构造函数的概念 &#x1f4d2;1.2拷贝构造…...

编程日记 2023/12/13 14:09:35

B 站基于 StarRocks 构建大数据元仓

作者&#xff1a;bilibili 大数据高级开发工程师 杨洋 B站大数据元仓是一款用来观测大数据引擎运行情况、推动大作业治理的系统诊断产品。经过调研和性能测试&#xff0c;大数据元仓最终以 StarRocks 为技术底座&#xff0c;从实际的应用效果来看&#xff0c;大部分查询都能在几…...

编程日记 2023/12/13 14:07:33

最常用的4种光纤接口结构

光纤接口&#xff0c;全名是光纤活动连接器。光纤连接器就是用于光纤与光纤之间进行可拆卸连接的器件&#xff0c;它是把光纤的两个端面精密的对接起来&#xff0c;使光能量前后达到最大程度的耦合。 光纤连接器属于高精密的器件&#xff0c;最常见结构形式可分包括&#xff1a…...

编程日记 2023/12/13 14:06:32

Axure网页端高交互组件库, 下拉菜单文件上传穿梭框日期城市选择器

作品说明 组件数量&#xff1a;共 11 套 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;web端原型设计、桌面端原型设计 作品特色 本作品为「web端组件库」&#xff0c;高保真高交互 (带仿真功能效果)&#xff1b;运用了动态面板、中继…...

编程日记 2023/12/13 14:04:30

基于Java新人入职管理系统

基于Java新人入职管理系统 功能需求 1、个人信息管理&#xff1a;系统需要提供个人信息管理功能&#xff0c;包括新人的基本信息、联系方式、教育背景、工作经历等。 2、入职流程管理&#xff1a;系统需要提供入职流程管理功能&#xff0c;包括入职手续的办理、合同签订、入…...

编程日记 2023/12/13 14:03:29

Python实战 | 如何抓取腾讯视频

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 爬虫: 作用: 批量采集数据 / 模拟用户行为 原理: 模拟成 客户端 向 服务器 发送网络请求 环境介绍: python 3.8 解释器 pycharm 编辑器 第三方模块: reques…...

编程日记 2023/12/13 14:02:28

总结MySQL 的一些知识点：MySQL 导出数据

MySQL 导出数据 MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上。 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中我们将数据表 kxdang_tbl 数据导出到 /tmp/kxdang.txt 文件中: mysql> SELECT * FROM kxdang_tbl -> INTO OUTFILE /…...

编程日记 2023/12/13 14:01:27

C语言-字符串操作函数-附加使用方式

文章目录 前言字符串复制-strcpy字符串复制&#xff08;按照位数&#xff09;-strncpy字符串比较-strcmp字符串比较(按照位数)-strncmp不区分大小写的字符串比较-strcasecmp不区分大小写的比较(前n位)-strncasecmp字符串按照格式写入-sprintf字符串按照格式和个数写入-snprintf…...

编程日记 2023/12/13 14:00:26

06-React组件 Redux React-Redux

React组件化&#xff08;以Ant-Design为例&#xff09; 组件化编程&#xff0c;只需要去安装好对应的组件&#xff0c;然后通过各式各样的组件引入&#xff0c;实现快速开发 我们这里学习的是 Ant-design &#xff08;应该是这样&#xff09;&#xff0c;它有很多的组件供我们…...

编程日记 2023/12/13 13:59:25

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/7/6 7:15:21

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/6/17 2:24:14

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/6/26 5:08:48

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/6/16 16:17:22

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/6 4:51:27

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/7/5 23:47:44

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/7/5 6:27:42

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

编程新知 2025/7/5 18:31:43

代理服务器-LVS的3种模式与调度算法

作者介绍&#xff1a;简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们上一章介绍了Web服务器&#xff0c;其中以Nginx为主&#xff0c;本章我们来讲解几个代理软件&#xff1a…...

编程新知 2025/7/7 1:48:33