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

Ajax技

news 2026/1/20 22:56:48

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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/1/19 7:34:08

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/19 3:41:08

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2026/1/15 5:47:56

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/1/15 5:44:53

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/19 2:12:06

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/1/14 22:06:21

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/1/20 22:51:34