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

Ajax技

news 2026/4/13 3:42:51

Ajax的特点

  1. 异步提交：Ajax采用异步通信方式，能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据，提升了用户体验。
  2. 无需插件：Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的，无需安装插件或控件。
  3. 局部刷新：Ajax能够实现局部刷新，只更新需要更新的部分，而不是整个页面。
  4. 支持多种格式数据交互：Ajax不仅支持XML格式数据交互，还支持JSON、HTML、文本等多种格式的数据交互。
  5. 提高性能：因为Ajax可以在页面保留数据，只更新需要更新的部分，减少了不必要的请求和响应，从而提高了网站性能。
  6. 提供多种编程语言支持：Ajax不仅支持Javascript编程，还支持其他编程语言，如PHP、ASP、Python等。
  7. 可以实现动态效果：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>

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

相关文章：

Ajax技

Ajax的特点 异步提交&#xff1a;Ajax采用异步通信方式&#xff0c;能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据&#xff0c;提升了用户体验。无需插件&#xff1a;Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的&#xff0c;无需安装插件或…...

编程日记 2023/11/28 22:05:34

Co-DETR:DETRs与协同混合分配训练论文学习笔记

论文地址&#xff1a;https://arxiv.org/pdf/2211.12860.pdf 代码地址&#xff1a; GitHub - Sense-X/Co-DETR: [ICCV 2023] DETRs with Collaborative Hybrid Assignments Training 摘要 作者提出了一种新的协同混合任务训练方案&#xff0c;即Co-DETR&#xff0c;以从多种标…...

编程日记 2023/11/28 22:04:33

ELk部署，保姆级教学超详细！！！

Elk&#xff08;Elasticsearch, Logstash, Kibana&#xff09;是一套日志收集、存储和展示方案&#xff0c;是由Elastic公司开发的开源软件组合。 Elasticsearch&#xff1a;是一个分布式的搜索和分析引擎。它能够处理大量的数据&#xff0c;并提供快速、准确的搜索结果&#x…...

编程日记 2023/11/28 22:03:31

计算机毕业设计springboot+vue高校田径运动会报名管理系统61s38

高校田径运动会管理采用java技术&#xff0c;基于springboot框架&#xff0c;mysql数据库进行开发&#xff0c;实现了首页、个人中心、运动员管理、裁判员管理、场地信息管理、项目类型管理、比赛项目管理、比赛报名管理、比赛成绩管理、通知公告管理、留言板管理、交流论坛、系…...

编程日记 2023/11/28 22:02:30

java学习part21枚举

117-面向对象(高级)-枚举类的两种定义方式及练习_哔哩哔哩_bilibili 1.概念 2.enum关键字 枚举早期是用class内放n个public static final类变量供调用。 后来有了enum关键字&#xff0c;enum里的枚举变量都是public static final&#xff0c;但是必须都省略不写 正确方法 &…...

编程日记 2023/11/28 22:01:29

MongoDB的部署

MongoDB部署 基于Linux平台 前置要求 在Centos7 64位系统中安装64位的MongoDB的安装包&#xff0c;通过访问MongoDB官网https://www.mongodb.com/download-center/community进入MongoDB下载页面。Version&#xff1a;指定MongoDB版本&#xff0c;MongoDB的版本分为稳定版和开发…...

编程日记 2023/11/28 22:00:28

解析和存储优化的批量爬虫采集策略

如果你正在进行批量爬虫采集工作&#xff0c;并且想要优化解析和存储过程&#xff0c;提高采集效率和稳定性&#xff0c;那么本文将为你介绍一些实用的策略和技巧。解析和存储是批量爬虫采集中不可忽视的重要环节&#xff0c;其效率和质量对整个采集系统的性能至关重要。在下面…...

编程日记 2023/11/28 21:58:25

【git】使用ssh

前言 git之前一直使用https&#xff0c;因为很方便随时随地都可以用。最近把代码托管到GitHub&#xff0c;使用https就使用不了。后面听同事说GitHub使用ssh是没问题的&#xff0c;就想着尝试一下。 git ssh配置 设置用户名和邮箱 git config --global use.name username g…...

编程日记 2023/11/28 21:57:24

Linux 文件锁

1 为什么用文件锁 文件是一种共享资源,多个进程对同一文件进行操作的时候,必然涉及到竞争状态&#xff0c;因此引入了文件锁实现对共享资源的访问进行保护的机制&#xff0c;通过对文件上锁&#xff0c; 来避免访问共享资源产生竞争状态。 2 文件锁用法 (1)参考文档: man 2 …...

编程日记 2023/11/28 21:55:22

原理Redis-SkipList

SkipList ZipList和QuickList的共同特点是节省内存。在遍历元素时&#xff0c;只能从头到尾或从尾到头&#xff0c;所以在查找头尾元素性能还是不错的&#xff0c;但是中间元素查询的性能就会差。 **SkipList&#xff08;跳表&#xff09;**首先是链表&#xff0c;但与传统链表…...

编程日记 2023/11/28 21:54:21

Express内置的中间件

自Express 4.16.0 版本开始&#xff0c;Express 内置了3个常用的中间件&#xff0c;极大的提高了 Express 项目的开发效率和体验: 1.express.static 快速托管静态资源的内置中间件&#xff0c;例如: HTML 文件、图片、CSS 样式等 (无兼容性) 2.express.json 解析JSON 格式的请…...

编程日记 2023/11/28 21:53:20

Webstorm 插件文件目录颜色分析——白蓝绿红黄灰

Webstorm 插件文件目录【白色、蓝色、绿色、红色、黄色、灰色】对应当前文件发生什么了&#xff0c;即文件夹当前状态。 WebStrom配置好git或SVN后文件颜色代表的含义&#xff1a; 白色&#xff1a;本地无修改内容 蓝色&#xff1a;文件内容有修改&#xff0c;暂未提交到git…...

编程日记 2023/11/28 21:52:19

蓝桥杯day01——根据给定数字划分数组

题目描述 给你一个下标从 0 开始的整数数组 nums 和一个整数 pivot 。请你将 nums 重新排列&#xff0c;使得以下条件均成立&#xff1a; 所有小于 pivot 的元素都出现在所有大于 pivot 的元素 之前 。所有等于 pivot 的元素都出现在小于和大于 pivot 的元素 中间 。小于 piv…...

编程日记 2023/11/28 21:51:18

oracle数据库巡检常见脚本-系列二

简介 作为数据库管理员&#xff08;DBA&#xff09;&#xff0c;定期进行数据库的日常巡检是非常重要的。以下是一些原因&#xff1a; 保证系统的稳定性&#xff1a;通过定期巡检&#xff0c;DBA可以发现并及时解决可能导致系统不稳定的问题&#xff0c;如性能瓶颈、资源利用率…...

编程日记 2023/11/28 21:50:17

JavaScript 表达式

JavaScript 表达式 目录 JavaScript 表达式 一、赋值表达式 二、算术表达式 三、布尔表达式 四、字符串表达式 表达式是一个语句的集合&#xff0c;计算结果是个单一值。 在JavaScript中&#xff0c;常见的表达式有4种&#xff1a; &#xff08;1&#xff09;赋值表达式…...

编程日记 2023/11/28 21:49:16

Python之Pygame游戏编程详解

一、介绍 1.1 定义 Pygame是一种流行的Python游戏开发库&#xff0c;它提供了许多功能&#xff0c;使开发人员可以轻松创建2D游戏。它具有良好的跨平台支持&#xff0c;可以在多个操作系统上运行&#xff0c;例如Windows&#xff0c;MacOS和Linux。在本文中&#xff0c;我们将…...

编程日记 2023/11/28 21:48:15

虚拟摇杆easytouch joystick的方向与角色移动方向不一致

更改 勾选 inverse axis 进行校正...

编程日记 2023/11/28 21:47:14

C++二分查找：统计点对的数目

本题其它解法 C双指针算法&#xff1a;统计点对的数目 本周推荐阅读 C二分算法&#xff1a;得到子序列的最少操作次数 本文涉及的基础知识点 二分查找算法合集 题目 给你一个无向图&#xff0c;无向图由整数 n &#xff0c;表示图中节点的数目&#xff0c;和 edges 组成…...

编程日记 2023/11/28 21:46:13

播放器开发(二)：了解FFmpeg与SDL常用对象和函数

学习课题&#xff1a;逐步构建开发播放器【QT5 FFmpeg6 SDL2】 前言 这一篇内容就是简单的了解一遍一些常用的函数名称和作用&#xff0c;混个眼熟。 能看源码的就去看源码&#xff01;&#xff01;&#xff01; 能看源码的就去看源码&#xff01;&#xff01;&#xff01; …...

编程日记 2023/11/28 21:45:13

【数据库】基于排序算法的去重，集合与包的并，差，交，连接操作实现原理，执行代价以及优化

基于两趟排序的其它操作 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏…...

编程日记 2023/11/28 21:44:11

嵌入式滤波器频率响应实时绘制库

1. FrequencyResponseDrawer 库概述FrequencyResponseDrawer 是一个面向嵌入式平台的轻量级 C 类库&#xff0c;专为在资源受限的微控制器上实时绘制数字滤波器频率响应曲线而设计。其核心目标并非替代 MATLAB 或 Python 的科学计算能力&#xff0c;而是解决嵌入式系统中一个典…...

编程新知 2026/4/13 2:43:11

异步知识库索引管线：与在线问答链路解耦架构介绍（离线构建，在线查询）分层索引、Elasticsearch

文章目录异步知识库索引管线&#xff1a;与在线问答链路解耦的架构实践一、核心思想&#xff1a;离线构建&#xff0c;在线查询二、整体架构图&#xff08;逻辑&#xff09;三、索引管线详解&#xff08;异步部分&#xff09;1️⃣ 数据接入&#xff08;Ingestion&#xff09;2…...

编程新知 2026/4/13 1:57:47

笑晕！我和朋友调试出一行“鬼畜C++代码”，4个nullptr叠满还能完美运行

文章目录 名场面开端&#xff1a;朋友扔来一行“看不懂但大受震撼”的代码调试之路&#xff1a;从“报错连连”到“逐渐正常”&#xff0c;每一步都在笑第一步&#xff1a;修正语法错误&#xff0c;括号和模板别乱套第二步&#xff1a;类型统一&#xff0c;解决“输出不对”的问…...

编程新知 2026/4/13 1:35:17

我试了四种去除 Gemini 水印的方法，整理成一篇实用对比撕

认识Pass层级结构 Pass范围从上到下一共分为5个层级&#xff1a; 模块层级&#xff1a;单个.ll或.bc文件 调用图层级&#xff1a;函数调用的关系。 函数层级&#xff1a;单个函数。 基本块层级&#xff1a;单个代码块。例如C语言中{}括起来的最小代码。 指令层级&#xff1a;单…...

编程新知 2026/4/13 0:54:26

HITIComm嵌入式双向通信库：Arduino上位机协议框架

1. HITIComm 库概述&#xff1a;面向嵌入式控制与监控的双向通信框架HITIComm 是一款专为 Arduino 平台设计的开源通信库&#xff0c;核心定位是构建 PC 端上位机软件&#xff08;如 HITIPanel、HITIBrain&#xff09;与 Arduino 下位机固件之间的高效、结构化、可扩展的双向数…...

编程新知 2026/4/13 0:42:08

JetBrains IDE试用期重置：3分钟恢复30天免费使用的终极指南

JetBrains IDE试用期重置&#xff1a;3分钟恢复30天免费使用的终极指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 还在为IntelliJ IDEA、PyCharm、WebStorm等JetBrains IDE试用期到期而烦恼吗&#xff1f;id…...

编程新知 2026/4/13 0:33:56

避坑指南：用VS2022和UE5.2搞定AirSim环境，解决编译报错（含Car模式配置）

避坑指南&#xff1a;用VS2022和UE5.2搞定AirSim环境&#xff0c;解决编译报错&#xff08;含Car模式配置&#xff09; 在虚幻引擎5&#xff08;UE5&#xff09;的浪潮中&#xff0c;许多开发者希望将AirSim这一强大的无人机和汽车仿真平台迁移到新引擎上&#xff0c;却频频遭遇…...

编程新知 2026/4/12 23:37:17

三步开启AI音乐创作：AICoverGen零基础制作专业级翻唱指南

三步开启AI音乐创作&#xff1a;AICoverGen零基础制作专业级翻唱指南 【免费下载链接】AICoverGen A WebUI to create song covers with any RVC v2 trained AI voice from YouTube videos or audio files. 项目地址: https://gitcode.com/gh_mirrors/ai/AICoverGen 想要…...

编程新知 2026/4/12 22:43:39

Langchain实战：如何用ChatGLM-4搭建你的第一个AI对话机器人（附完整代码）

Langchain实战&#xff1a;如何用ChatGLM-4搭建你的第一个AI对话机器人&#xff08;附完整代码&#xff09; 最近两年&#xff0c;大模型技术以惊人的速度渗透到各个领域。从智能客服到内容创作&#xff0c;从代码生成到数据分析&#xff0c;AI对话机器人正在重塑人机交互的方式…...

编程新知 2026/4/12 22:02:53

高效查询：C++二分查找在年龄统计中的应用实践

1. 为什么需要二分查找处理年龄统计&#xff1f; 最近在做一个学生管理系统时&#xff0c;遇到了一个很有意思的问题&#xff1a;系统里有10万名学生信息&#xff0c;需要频繁查询某个年龄段的起止位置。最开始我用的是最简单的线性查找&#xff0c;结果每次查询都要遍历整个数…...

编程新知 2026/4/12 21:47:20