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

Ajax技

news 2025/8/15 23:48:35

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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/8/11 20:37:10

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/6/21 16:23:04

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/7/11 1:50:50

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/8/5 6:59:02

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/8/5 6:58:53

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/8/4 3:44:13

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/7/30 19:13:53

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2025/8/15 2:03:06