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

ajax 的入门案例

一、ajax

ajax,Asynchronous JavaScript And XML,异步的JavaScript和XML

同步:伴随着页面的刷新或跳转,即全局刷新;同步请求会阻塞代码的执行,即同步请求会一个一个的执行

异步:在不刷新页面的情况下与服务器进行交互,即局部刷新;异步请求不会阻塞代码的执行,ajax请求一旦发送,不会等服务器响应结果完毕,后面的代码就会继续执行

ajax的核心对象XMLHttpRequest

二、axios

1、axios入门案例

testAxios(){axios({url:"testAxiosServlet?method=testAxios",//请求路径method:"get"//请求方式}).then(response=>{//请求成功要执行的钩子函数//response表示封装了服务器响应信息的对象console.log(this.message);});
}

2、axios发送请求参数

2.1、发送普通的请求参数

axios({url:"testAxiosServlet?method=testAxios",//请求路径method:"post",//请求方式//params设置普通的请求参数,不管使用的get或post请求方式,请求参数都会拼接在请求地址后params:{username:"admin",password:"123456"}
}).then(response=>{//请求成功要执行的钩子函数//response表示封装了服务器响应信息的对象console.log(this.message);
});

2.2、发送json格式的请求参数

axios({url:"testAxiosServlet?method=testAxiosUseData",//请求路径method:"post",//请求方式//data设置json格式的请求参数,会在请求报文中保存传输到服务器,因此请求方式必须为postdata:{username:"root",password:"abc123"}
}).then(response=>{//请求成功要执行的钩子函数//response表示封装了服务器响应信息的对象console.log(this.message);
});

params和data的区别:

1、params传输请求参数时,可以使用get或post请求方式,会以name=value&name=value的格式拼接在请求地址后

2、data传输请求参数时,只能使用post请求方式,会以{key:value,key:value}的格式在请求报文的请求体中传输到服务器

3、params传输的请求参数可以通过request.getParameter()或request.getParameterValues()获取,但是data传输的请求参数不能通过此方法获取,只能通过获取请求体的方式获取json字符串整体,在通过相应技术转换为Java对象

3、axios.get()

axios.get("testAxiosServlet?method=testAxiosByGet&username=admin&password=123456"
).then(response=>{console.log(response.data);
});

4、axios.post()

axios.post("testAxiosServlet?method=testAxiosByPost",//请求参数{username:"root",password:"abc123"}//使用data的方式传输json格式的请求参数
).then(response=>{console.log(response.data);
});

5、处理json格式的请求参数

5.1、使用gson

protected void testAxiosUseJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取请求体中json格式的请求参数BufferedReader reader = request.getReader();StringBuffer sb = new StringBuffer();String body;while((body = reader.readLine()) != null){sb.append(body);}String data = sb.toString();//data = {"username":"admin","password":"123456","age":23,"gender":"男"}//将json格式的请求参数转换为Java对象(实体类对象、map)//使用Gson将json格式的请求参数转换为实体类对象Gson gson = new Gson();User userByGson = gson.fromJson(data, User.class);System.out.println(userByGson);//使用Gson将json格式的请求参数转换为mapMap mapByGson = gson.fromJson(data, Map.class);System.out.println(mapByGson);response.getWriter().write("hello,testAxiosUseJson");
}

5.2、使用jackson

protected void testAxiosUseJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取请求体中json格式的请求参数BufferedReader reader = request.getReader();StringBuffer sb = new StringBuffer();String body;while((body = reader.readLine()) != null){sb.append(body);}String data = sb.toString();//data = {"username":"admin","password":"123456","age":23,"gender":"男"}//将json格式的请求参数转换为Java对象(实体类对象、map)//使用jackson将json格式的请求参数转换为实体类对象ObjectMapper mapper = new ObjectMapper();User userByJackson = mapper.readValue(data, User.class);System.out.println(userByJackson);//使用jackson将json格式的请求参数转换为mapMap mapByJackson = mapper.readValue(data, Map.class);System.out.println(mapByJackson);response.getWriter().write("hello,testAxiosUseJson");
}

6、响应浏览器json格式的结果

6.1、使用gson

protected void testAxiosReturnJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {User user1 = new User(1001,"admin1","123456",23,"男");User user2 = new User(1002,"admin2","123456",23,"男");User user3 = new User(1003,"admin3","123456",23,"男");Gson gson = new Gson();//通过gson将实体类对象转换为json响应浏览器//String jsonString = gson.toJson(user);//通过gson将map转换为json响应浏览器/*Map<String, User> map = new HashMap<>();map.put("1001", user1);map.put("1002", user2);map.put("1003", user3);String jsonString = gson.toJson(map);*///通过gson将list转换为json响应浏览器List<User> list = Arrays.asList(user1, user2, user3);String jsonString = gson.toJson(list);response.getWriter().write(jsonString);
}

6.2、使用jackson

protected void testAxiosReturnJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {User user1 = new User(1001,"admin1","123456",23,"男");User user2 = new User(1002,"admin2","123456",23,"男");User user3 = new User(1003,"admin3","123456",23,"男");ObjectMapper mapper = new ObjectMapper();//通过jackson将实体类对象转换为json响应浏览器//String jsonString = mapper.writeValueAsString(user1);//通过jackson将map转换为json响应浏览器/*Map<String, User> map = new HashMap<>();map.put("1001", user1);map.put("1002", user2);map.put("1003", user3);String jsonString = mapper.writeValueAsString(map);*///通过jackson将list转换为json响应浏览器List<User> list = Arrays.asList(user1, user2, user3);String jsonString = mapper.writeValueAsString(list);response.getWriter().write(jsonString);
}

相关文章:

ajax 的入门案例

一、ajax ajax&#xff0c;Asynchronous JavaScript And XML&#xff0c;异步的JavaScript和XML 同步&#xff1a;伴随着页面的刷新或跳转&#xff0c;即全局刷新&#xff1b;同步请求会阻塞代码的执行&#xff0c;即同步请求会一个一个的执行 异步&#xff1a;在不刷新页面…...

Flutter TextField 交互实例 —— 新手礼包

大家好&#xff0c;我是 17。 新手礼包一共 3 篇文章&#xff0c;每篇都是描述尽量详细&#xff0c;实例讲解&#xff0c;包会&#xff01; Flutter Row 实例 —— 新手礼包Flutter TextField UI 实例 —— 新手礼包Flutter TextField 交互实例 —— 新手礼包 本篇包含所有常…...

折叠屏:手机厂商的「续命良药」

【潮汐商业评论/文】 作为办公室的“时尚达人”&#xff0c;Wendy又为自己添置了一款新时尚单品——折叠手机。 “没有哪个女孩子能拒绝一款小巧又时尚的折叠手机吧&#xff0c;我心动了好久&#xff0c;终于狠狠心买了一部。”提起自己的折叠手机&#xff0c;Wendy的眼里满是…...

RabbitMQ 保证消息不丢失的几种手段

文章目录 1.RabbitMQ消息丢失的三种情况2.RabbitMQ消息丢失解决方案2.1 针对生产者2.1.1 方案1 &#xff1a;开启RabbitMQ事务2.1.2 方案2&#xff1a;使用confirm机制 2.2 Exchange路由到队列失败2.3 RabbitMq自身问题导致的消息丢失问题解决方案2.3.1 消息持久化2.3.2 设置集…...

nginx配置

单线程应用 稳定性高 系统资源消耗低 线程切换消耗小 对HTTP并发连接处理能力高 单台服务器可支持2w个并发请求 nginx与apache区别 Nginx相对于Apache的优点: 轻量级&#xff0c;同样是 web 服务&#xff0c;比Apache 占用更少的内存及资源&#xff0c;高并发&#xff0…...

linux从入门到精通 第一章centos7里tomcat,jdk,httpd,mysql57,mysql80的安装

配置centos运行环境 一 安装httpd,tomcat,jdk,mysql1 安装httpd2 安装tomcat3 安装jdk 三 MySql的安装1 克隆出来两台虚拟机2 配置虚拟机3 链接xhsell4 链接xftp5 mysql8的安装6 mysql5.7的安装 一 安装httpd,tomcat,jdk,mysql 1 安装httpd 下载httpd yum -y install httpd关…...

ChatGPT 速通手册——开源社区的进展

开源社区的进展 在 ChatGPT 以外&#xff0c;谷歌、脸书等互联网巨头&#xff0c;也都发布过千亿级参数的大语言模型&#xff0c;但在交谈问答方面表现相对 ChatGPT 来说都显得一般。根据科学人员推测&#xff0c;很重要的一部分原因是缺失了RLHF(Reinforcement Learning with…...

string类

string - C Reference (cplusplus.com) 引入&#xff1a; ASCII码表------>Unicode 其中又进行了分类&#xff1a; &#xff08;UTF--8兼容ASCII码表&#xff09; 等等等等 &#xff08;不但迭代和更新&#xff09; 例&#xff1a; 目录 正文开始&#xff01;&#xff0…...

LLM总结(持续更新中)

引言 当前LLM模型火出天际&#xff0c;但是做事还是需要脚踏实地。此文只是日常学习LLM&#xff0c;顺手整理所得。本篇博文更多侧重对话、问答类LLM上&#xff0c;其他方向&#xff08;代码生成&#xff09;这里暂不涉及&#xff0c;可以去看综述来了解。 之前LLM模型梳理 …...

【GPT4】微软 GPT-4 测试报告(2)多模态与跨学科的组合

欢迎关注【youcans的AGI学习笔记】原创作品&#xff0c;火热更新中 微软 GPT-4 测试报告&#xff08;1&#xff09;总体介绍 微软 GPT-4 测试报告&#xff08;2&#xff09;多模态与跨学科能力 微软 GPT-4 测试报告&#xff08;3&#xff09;编程能力 微软 GPT-4 测试报告&…...

Celery使用教程完整版【从安装到启用】

Celery是一个基于Python开发的异步任务队列&#xff0c;可以实现任务的异步调度和处理。 以下是Celery使用教程的基本步骤&#xff1a; 安装Celery库 使用pip命令安装Celery库&#xff1a; pip install celery 创建Celery实例 在项目的Python文件中创建Celery实例&#x…...

【Java技术指南】「JPA编程专题」让你不再对JPA技术中的“持久化型注解”感到陌生了

JPA编程专题 JPA的介绍JPA的介绍分析JPA注解总览JPA实体型注解EntityTableTableGeneratorTableGenerator 属性 Temporal TransientColumnColumn 属性ColumnUniqueConstraint属性状态 VersionVersion Embeddable 和 EmbeddedEmbedded EmbeddedIdMappedSuperclassEntityListeners…...

Java基础:IO流有哪些,各有什么特点和功能

具体操作分成面向字节(Byte)和面向字符(Character)两种方式。 如下图所示&#xff1a; IO流的三种分类方式 IO流的层次结构 IO流的常用基类有&#xff1a; 字节流的抽象基类&#xff1a;InputStream和OutputStream&#xff1b; 字符流的抽象基类&#xff1a;Reader和Writer…...

MySQL、PostgreSQL、Oracle、SQL Server数据库触发器实现同步数据

数据库触发器是一种在数据库中设置的程序&#xff0c;当满足某些特定条件时&#xff0c;它会自动执行。触发器通常与数据表的操作&#xff08;例如插入、更新和删除&#xff09;相关联&#xff0c;它们可以帮助保证数据的完整性和一致性。在本篇博客中&#xff0c;我将介绍各种…...

因为我没交周报,leader要罚款200元,怎么给他挖坑?能以敲诈勒索罪告他吗?...

没交周报就罚款&#xff0c;这种事你们遇到过吗&#xff1f; 一位网友说&#xff1a;leader在群里通知不交周报就罚款&#xff0c;这周罚到他头上&#xff0c;要罚款200元&#xff0c;这种情况怎么办&#xff1f;能定他一个敲诈勒索罪或者抢劫罪吗&#xff1f;最差也要在离职后…...

java跨域问题

什么是跨域&#xff1f; 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com页面去请求www.google.com的资源。但是一般情况下不能这么做&#xff0c;他是由浏览器的同源策略造成的&#xff0c;是浏览器对JavaScript施加的安全限制。 跨域的严格定义是&…...

故障重现, JAVA进程内存不够时突然挂掉模拟

背景&#xff0c;服务器上的一个JAVA服务进程突然挂掉&#xff0c;查看产生了崩溃日志&#xff0c;如下&#xff1a; # Set larger code cache with -XX:ReservedCodeCacheSize # This output file may be truncated or incomplete. # # Out of Memory Error (os_linux.cpp:26…...

数画-AI绘画-免费的人工智能AI绘画网站

文章目录 AIGC什么是AI作画&#xff1f;Prompt数画AIGC的未来发展结语 AIGC AIGC&#xff08;AI Generated Content&#xff09;是指利用人工智能生成内容。是利用人工智能来生成你所需要的内容&#xff0c;GC的意思是创作内容。与之相对应的概念中&#xff0c;比较熟知的还有P…...

ElasticSearch安装、启动、操作及概念简介

ElasticSearch快速入门 文件链接&#xff1a;https://pan.baidu.com/s/15kJtcHY-RAY3wzpJZIn4-w?pwd0k5a 提取码&#xff1a;0k5a 有些软件对于安装路径有一定的要求&#xff0c;例如&#xff1a;路径中不能有空格&#xff0c;不能有中文&#xff0c;不能有特殊符号&#xf…...

Linux用户管理

♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维课堂笔记,努力不一定有收获,但一定会有收获加油!一起努力,共赴美好人生! ♥️夕阳下,是最美的绽放,树高千尺,落叶归根人生不易,人间真情 前言 努力是最好的捷径! 目录 1.Linux基于用户身份对…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...