Ajax技
Ajax的特点
- 异步提交：Ajax采用异步通信方式，能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据，提升了用户体验。
- 无需插件：Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的，无需安装插件或控件。
- 局部刷新：Ajax能够实现局部刷新，只更新需要更新的部分，而不是整个页面。
- 支持多种格式数据交互：Ajax不仅支持XML格式数据交互，还支持JSON、HTML、文本等多种格式的数据交互。
- 提高性能：因为Ajax可以在页面保留数据，只更新需要更新的部分，减少了不必要的请求和响应，从而提高了网站性能。
- 提供多种编程语言支持：Ajax不仅支持Javascript编程，还支持其他编程语言，如PHP、ASP、Python等。
- 可以实现动态效果：Ajax可以用来实现动态效果，如自动补全、搜索框提示、无限滚动等。
Ajax案列
views
from django.shortcuts import render, HttpResponsedef a_ajax(request):if request.method == 'POST':"""接受ajax提交的数据"""print(request.POST) # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}># d1 = request.POST.get('inp1')# d2 = request.POST.get('inp2')# d3 = int(d1)+int(d2)# print(d3)l_dict = {'username': 'kk', 'password': 123}import jsonreturn HttpResponse(json.dumps(l_dict))return render(request, 'a_ajax.html')
HTML文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
{# <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>#}
</head>
<body>
<input type="text" id="inp1">+
<input type="text" id="inp2">=
<input type="text" id="inp3">
<button class="btn">提交</button>
</body>
</html><script>$('.btn').click(function() {var inp1 = $("#inp1").val();var inp2 = $("#inp2").val();//获取到的数据返回到后端，使用python来计算$.ajax({url: '',//不写默认朝当前地址传递type: 'post',//默认为getdata: {inp1: inp1, inp2: inp2},//回调函数用来压接受后端返回的数据success: function (res) {console.log(res)//获取值{#$("#inp3").val(res)#}//进行返序列化//后端返回的数据别忘记返序列化，后端记得序列化res = JSON.parse(res)console.log(res.username)console.log(res.password)}})})
</script>前后端传输数据的编码格式
我们只研究post请求方式，get没有请求方式，他的格式为
get：index（地址）？a=1&b=2
参数直接在url后面
post的请求方式
form表单
Ajax
api工具
1. form表单的post请求
默认的编码格式：urlencode
数据的传输方式：title=dasdas&price=2312&date=&publish=2&authors=3，k,v形式的键值对传输
后端如何接收：把前端提交的数据封装到request.POST中，而传输的文件则在request.FILES中
提交form-data文件数据：enctype：form-data
传输方式：title=dasdas&price=2312&date=&publish=2&authors=3
2. Ajax提交POST请求
默认Ajax提交数据 还是在request,POST中接受，默认编码格式urlencode
需要修改的contype：json
3. Ajax提交json的格式数据
json格式的数据提交后
设置提交json格式：
$.ajax({url: '',//不写默认朝当前地址传递type: 'post',//默认为getdata: JSON.stringify({inp1:inp1, inp2:inp2}),contentType: 'application/json',//回调函数用来压接受后端返回的数据success: function (res) {console.log(res)4. Ajax提交文件数据
<script>$(".btn").click(function (ev) {console.log(123);// 要获取到文件数据，{#console.log($("#myfile")[0].files[0]) // C:\fakepath\123.png#}// 提交文件数据需要借助于formdata对象var myFormDataObj = new FormData;var username = $("#username").val();var myfile = $("#myfile")[0].files[0];myFormDataObj.append('username', username);myFormDataObj.append('myfile',myfile);$.ajax({url: '',type: 'post',{#data: JSON.stringify({a: 1, b: 2}), // 序列化的 "{"a":1, "b":2}"#}data: myFormDataObj, // 序列化的 "{"a":1, "b":2}"{#contentType: 'application/json', // json格式的#}contentType:false, // 告诉浏览器不要给我的编码格式做任何的处理processData: false, //success: function (res) {}})})
</script>
相关文章：
Ajax技
Ajax的特点 异步提交：Ajax采用异步通信方式，能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据，提升了用户体验。无需插件：Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的，无需安装插件或…...
Co-DETR:DETRs与协同混合分配训练论文学习笔记
论文地址：https://arxiv.org/pdf/2211.12860.pdf 代码地址： GitHub - Sense-X/Co-DETR: [ICCV 2023] DETRs with Collaborative Hybrid Assignments Training 摘要 作者提出了一种新的协同混合任务训练方案，即Co-DETR，以从多种标…...
ELk部署，保姆级教学超详细！！！
Elk（Elasticsearch, Logstash, Kibana）是一套日志收集、存储和展示方案，是由Elastic公司开发的开源软件组合。 Elasticsearch：是一个分布式的搜索和分析引擎。它能够处理大量的数据，并提供快速、准确的搜索结果&#x…...
计算机毕业设计springboot+vue高校田径运动会报名管理系统61s38
高校田径运动会管理采用java技术，基于springboot框架，mysql数据库进行开发，实现了首页、个人中心、运动员管理、裁判员管理、场地信息管理、项目类型管理、比赛项目管理、比赛报名管理、比赛成绩管理、通知公告管理、留言板管理、交流论坛、系…...
java学习part21枚举
117-面向对象(高级)-枚举类的两种定义方式及练习_哔哩哔哩_bilibili 1.概念 2.enum关键字 枚举早期是用class内放n个public static final类变量供调用。 后来有了enum关键字，enum里的枚举变量都是public static final，但是必须都省略不写 正确方法 &…...
MongoDB的部署
MongoDB部署 基于Linux平台 前置要求 在Centos7 64位系统中安装64位的MongoDB的安装包，通过访问MongoDB官网https://www.mongodb.com/download-center/community进入MongoDB下载页面。Version：指定MongoDB版本，MongoDB的版本分为稳定版和开发…...
解析和存储优化的批量爬虫采集策略
如果你正在进行批量爬虫采集工作，并且想要优化解析和存储过程，提高采集效率和稳定性，那么本文将为你介绍一些实用的策略和技巧。解析和存储是批量爬虫采集中不可忽视的重要环节，其效率和质量对整个采集系统的性能至关重要。在下面…...
【git】使用ssh
前言 git之前一直使用https，因为很方便随时随地都可以用。最近把代码托管到GitHub，使用https就使用不了。后面听同事说GitHub使用ssh是没问题的，就想着尝试一下。 git ssh配置 设置用户名和邮箱 git config --global use.name username g…...
Linux 文件锁
1 为什么用文件锁 文件是一种共享资源,多个进程对同一文件进行操作的时候,必然涉及到竞争状态，因此引入了文件锁实现对共享资源的访问进行保护的机制，通过对文件上锁， 来避免访问共享资源产生竞争状态。 2 文件锁用法 (1)参考文档: man 2 …...
原理Redis-SkipList
SkipList ZipList和QuickList的共同特点是节省内存。在遍历元素时，只能从头到尾或从尾到头，所以在查找头尾元素性能还是不错的，但是中间元素查询的性能就会差。 **SkipList（跳表）**首先是链表，但与传统链表…...
Express内置的中间件
自Express 4.16.0 版本开始，Express 内置了3个常用的中间件，极大的提高了 Express 项目的开发效率和体验: 1.express.static 快速托管静态资源的内置中间件，例如: HTML 文件、图片、CSS 样式等 (无兼容性) 2.express.json 解析JSON 格式的请…...
Webstorm 插件文件目录颜色分析——白蓝绿红黄灰
Webstorm 插件文件目录【白色、蓝色、绿色、红色、黄色、灰色】对应当前文件发生什么了，即文件夹当前状态。 WebStrom配置好git或SVN后文件颜色代表的含义： 白色：本地无修改内容 蓝色：文件内容有修改，暂未提交到git…...
蓝桥杯day01——根据给定数字划分数组
题目描述 给你一个下标从 0 开始的整数数组 nums 和一个整数 pivot 。请你将 nums 重新排列，使得以下条件均成立： 所有小于 pivot 的元素都出现在所有大于 pivot 的元素 之前 。所有等于 pivot 的元素都出现在小于和大于 pivot 的元素 中间 。小于 piv…...
oracle数据库巡检常见脚本-系列二
简介 作为数据库管理员（DBA），定期进行数据库的日常巡检是非常重要的。以下是一些原因： 保证系统的稳定性：通过定期巡检，DBA可以发现并及时解决可能导致系统不稳定的问题，如性能瓶颈、资源利用率…...
JavaScript 表达式
JavaScript 表达式 目录 JavaScript 表达式 一、赋值表达式 二、算术表达式 三、布尔表达式 四、字符串表达式 表达式是一个语句的集合，计算结果是个单一值。 在JavaScript中，常见的表达式有4种： （1）赋值表达式…...
Python之Pygame游戏编程详解
一、介绍 1.1 定义 Pygame是一种流行的Python游戏开发库，它提供了许多功能，使开发人员可以轻松创建2D游戏。它具有良好的跨平台支持，可以在多个操作系统上运行，例如Windows，MacOS和Linux。在本文中，我们将…...
虚拟摇杆easytouch joystick的方向与角色移动方向不一致
更改 勾选 inverse axis 进行校正...
C++二分查找：统计点对的数目
本题其它解法 C双指针算法：统计点对的数目 本周推荐阅读 C二分算法：得到子序列的最少操作次数 本文涉及的基础知识点 二分查找算法合集 题目 给你一个无向图，无向图由整数 n ，表示图中节点的数目，和 edges 组成…...
：了解FFmpeg与SDL常用对象和函数)
播放器开发(二)：了解FFmpeg与SDL常用对象和函数
学习课题：逐步构建开发播放器【QT5 FFmpeg6 SDL2】 前言 这一篇内容就是简单的了解一遍一些常用的函数名称和作用，混个眼熟。 能看源码的就去看源码！！！ 能看源码的就去看源码！！！ …...
【数据库】基于排序算法的去重，集合与包的并，差，交，连接操作实现原理，执行代价以及优化
基于两趟排序的其它操作 专栏内容： 手写数据库toadb 本专栏主要介绍如何从零开发，开发的步骤，以及开发过程中的涉及的原理，遇到的问题等，让大家能跟上并且可以一起开发，让每个需要的人成为参与者。 本专栏…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
【JVM】- 内存结构
引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...