ajax请求方式处理

1、前置准备

1.1、SpringBoot项目下:写一个controller

@RestController
public class TestController {@RequestMapping("/yyy")public void test(HttpServletRequest request, HttpServletResponse response){String yang = request.getParameter("yang");System.out.println(yang);}
}

1.2、Html中写一段jquery的$.ajax方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--注意:引入jquery--><script src="jquery-3.7.1.min.js"></script>
</head>
<body><script>var o = {key1: 'value1',key2: 'value2',yang: '12312312'}$.ajax({url: '/yyy',type: 'POST',data: o,// 其他参数...success: function(response) {// 处理成功的回调},error: function(error) {// 处理错误的回调}});</script>
</body>
</html>

1.3、$.ajax的参数介绍

https://zhuanlan.zhihu.com/p/613814478

1、type:指定了请求的类型,常见的请求类型有GETPOSTPUTDELETE等,
分别对应着获取数据、新增数据、更新数据、删除数据等操作。type参数的默认值是GET2、url:请求的地址。可以是相对地址或绝对地址。在url中可以包含查询参数,如“/api/data?id=1&name=test”。3、data:发送到服务器的数据,可以是字符串、对象或数组等格式。data可以是一个字符串、对象或数组等格式。如果是一个对象,会自动转换4、为查询参数的格式,如“id=1&name=test”。如果是一个数组,会将每个元素作为一个查询参数,如“ids[]=1&ids[]=2&ids[]=3”。5、dataType:服务器返回的数据类型,常见的数据类型有xml、json、html、text等。根据dataType的值,jQuery会自动将服务器返回的数
据进行解析,以便JavaScript程序能够方便地使用。6、success:请求成功时的回调函数。可以在这个函数中对返回的数据进行处理。success函数接收一个参数data,表示服务器返回的数据。7、error:请求失败时的回调函数。可以在这个函数中处理错误。error函数接收三个参数:xhr表示XMLHttpRequest对象,status表示错误
的状态码,error表示错误的描述信息。8、beforeSend:发送请求前的回调函数,可以在这个函数中对请求进行处理,如添加请求头信息。beforeSend函数接收一个XMLHttpRequest
对象作为参数,可以在这个对象上设置请求头信息等。9、complete:请求完成后的回调函数,无论请求成功或失败都会执行。complete函数接收一个XMLHttpRequest对象和一个表示请求状态的字符串参数。

2、Get请求(JavaScript对象)

<script>var o = {key1: 'value1',key2: 'value2',yang: '12312312'}$.ajax({url: '/yyy',type: 'GET',data: o,// 其他参数...success: function(response) {// 处理成功的回调},error: function(error) {// 处理错误的回调}
});

image-20231123093533118

3、Get请求(json字符串)

<script>var o = {key1: 'value1',key2: 'value2',yang: '12312312'}$.ajax({url: '/yyy',type: 'GET',data: JSON.stringify(o),//用于设置发送到服务器的数据的内容类型(Content-Type)contentType: 'application/json',// 其他参数...success: function(response) {// 处理成功的回调},error: function(error) {// 处理错误的回调}
});</script>

image-20231123094522116

4、Post请求(JavaScript对象)

var o = {key1: 'value1',key2: 'value2',yang: '12312312'
}$.ajax({url: '/yyy',type: 'POST',data: o,// 其他参数...success: function(response) {// 处理成功的回调},error: function(error) {// 处理错误的回调}
});

image-20231123092916975


image-20231123092921010


5、Post请求(json字符串)

var o = {key1: 'value1',key2: 'value2',yang: '12312312'
}$.ajax({url: '/yyy',type: 'POST',data: JSON.stringify(o),//用于设置发送到服务器的数据的内容类型(Content-Type)contentType: 'application/json',// 其他参数...success: function(response) {// 处理成功的回调},error: function(error) {// 处理错误的回调}
});

image-20231123094255998

6、注意事项

6.1、contentType: ‘application/json’, 为什么 只能用post方法接受?

contentType: 'application/json' 通常与 POST 方法一起使用的原因是,它指定了请求体中数据的编码类型为 JSON 格式。这种设置表明请求体中包含的数据是一个 JSON 字符串,而不是标准的表单数据。在服务器端,你通常需要根据请求头中的 Content-Type 值来正确解析请求的数据。GET 请求通常将数据附加到 URL 的查询字符串中,而不是放在请求体中,因此在这种情况下,设置 contentType: 'application/json' 并不是很有意义,因为 GET 请求通常不包含请求体。当使用 POST 请求时,数据可以包含在请求体中,而不会暴露在 URL 中。因此,当你想要向服务器发送 JSON 格式的数据时,通常使用 POST 请求,并设置 contentType: 'application/json'

image-20231123094822597

6.2、HttpServletRequest.getParameter可以接受的数据

        var o = {key1: 'value1',key2: 'value2',yang: '12312312'}$.ajax({url: '/yyy',//GET、POST、GET直接拼接、form表单type: 'POST',data: o,success: function(response) {// 处理成功的回调},error: function(error) {// 处理错误的回调}});

image-20231123095418927

6.3、前端传递:json数据,java接收

Content-Type(通常是"application/json)

6.3.1、springWeb项目获取

用注解 @RequestBody

@RestController
public class MyController {@PostMapping("/receiveJson")public String receiveJson(@RequestBody MyData myData) {// 在这里处理接收到的JSON数据String name = myData.getName();int age = myData.getAge();// 进行业务逻辑处理return "JSON data received successfully!";}
}

6.3.2、Servlet中处理请求:获取

在这个例子中,request.getInputStream()用于获取请求的输入流,然后使用BufferedReader从输入流中读取JSON数据。这种方法适用于POST请求,其中JSON数据是通过请求体发送的。请注意,这是一个基本的例子,实际应用中可能需要进行错误处理、数据验证等。确保前端通过POST请求以正确的方式发送JSON数据,例如设置正确的Content-Type头部(通常是"application/json")。如果你的应用使用Spring框架,推荐使用Spring提供的@RequestBody注解,因为它会自动处理JSON到对象的转换,并提供更方便的方式来处理请求。
@WebServlet("/receiveJson")
public class MyServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 从请求中获取输入流InputStream inputStream = request.getInputStream();// 从输入流中读取JSON数据String jsonString = new BufferedReader(new InputStreamReader(inputStream)).lines().collect(Collectors.joining("\n"));// 在这里处理接收到的JSON数据System.out.println("Received JSON: " + jsonString);// 进行业务逻辑处理// 返回响应response.getWriter().write("JSON data received successfully!");}
}

6.4、载荷:表单数据、请求负载

  • 载荷
"载荷"(payload)是一个通用术语,用于表示在计算机系统中传输的有效数据。在不同的上下文中,"载荷" 可以指代不同类型的数据。在 HTTP 请求的背景下,"载荷" 通常用于描述请求体中的数据。
  • 表单数据
在 Web 开发中,"表单数据" 通常指的是通过 HTML 表单提交的数据。当用户填写表单并点击提交按钮时,浏览器将用户输入的数据封装成一个表单数据的集合,并通过 HTTP 请求将这些数据发送到服务器。这些表单数据可以使用不同的编码方式,最常见的是 application/x-www-form-urlencoded 编码,它将数据编码为键值对的形式,类似于 URL 查询字符串。另一种是 multipart/form-data 编码,通常用于文件上传。表单数据在请求体中以键值对的形式出现,例如 name=value。
  • 请求负载(Request Payload)
"请求负载" 是一个更通用的术语,指的是 HTTP 请求体中包含的所有数据,不仅仅局限于表单数据。它可以包含任何类型的数据,包括文本、二进制、JSON、XML 等。当使用 Ajax 或其他方式发送数据到服务器时,数据被包含在请求负载中。这可以是任何格式,取决于请求的内容类型(Content-Type)。如果请求负载是 JSON 格式的数据,通常使用 application/json 作为 Content-Type。在这种情况下,请求体中的数据是 JSON 字符串。

6.5、request.getInputStream() 读取的是哪里的数据?

request.getInputStream() 方法从 HTTP 请求的主体(body)中获取输入流。
在 HTTP 请求中,请求主体包含了请求的具体数据,例如 POST 请求中的表单数据或 JSON 数据。当客户端发送一个包含主体的 HTTP 请求时,请求主体的内容就会通过这个输入流传输到服务器端。在服务端,你可以使用 request.getInputStream() 来读取这个输入流,从而获取请求主体中的数据。对于 POST 请求而言,特别是使用 "application/x-www-form-urlencoded" 或 "multipart/form-data" 格式提交的表单数据,这些数据通常被包含在请求主体中。对于 JSON 数据,它也可以作为请求主体的一部分被发送。需要注意的是,对于 GET 请求,通常不会包含请求主体,而是将参数附加在 URL 的查询字符串中。在这种情况下,不需要使用 request.getInputStream() 来获取数据,而是可以使用 request.getParameter() 方法来获取 URL 中的参数。

6.6、ajax 的post默认 是以什么格式提交?

默认情况下,使用Ajax的POST请求时,数据以"application/x-www-form-urlencoded"格式提交。
这是因为jQuery等Ajax库的默认设置是将数据编码为这种形式,这种编码适用于普通的表单提交。这种格式要求将数据编码成键值对的形式,每个键值对之间使用&符号分隔,而键和值之间使用等号(=)分隔。
例如,一个包含name和age参数的POST请求体可能如下所示:
name=John&age=30

如果你想要以JSON格式提交数据,你需要显式地设置Content-Type为"application/json",并将数据以JSON字符串的形式发送。

例如,使用jQuery的$.ajax方法:

$.ajax({url: 'your-api-endpoint',type: 'POST',contentType: 'application/json',data: JSON.stringify({key1: 'value1',key2: 'value2'}),success: function(response) {// 处理响应},error: function(error) {// 处理错误}
});
在这个例子中,contentType: 'application/json'设置了请求的Content-Type,而data: JSON.stringify({...})将数据转换为JSON字符串。
这样发送的请求体将以JSON格式进行编码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/163031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI助力钢铁产业数字化,python基于YOLOv5开发构建钢铁产业产品智能自动化检测识别系统

AI为工业产业智能化数字化赋能早已不是什么新鲜事&#xff0c;越来越多的行业和领域开始更大范围去拥抱AI&#xff0c;享受科技带来的变革力量&#xff0c;在我们之前的文章中也有很多相关领域项目的实践经历&#xff0c;本文的核心目标就是想要基于钢铁领域产品数据来开发构建…

【KMP算法】学习总结

说明&#xff1a; 文章内容为对KMP算法的总结&#xff0c;以及力扣例题&#xff1b;文章内容为个人的学习总结&#xff0c;如有错误&#xff0c;欢迎指正。 文章目录 1. KMP算法1.1 算法步骤1.2 关于指针回退问题 2 . LeetCode例题 1. KMP算法 1.1 算法步骤 KMP算法通常用于…

springboot_vue知识点

代码放到了仓库。 springboot_vue知识点 1.搭建1.vue2.springboot 2.前后端请求和响应的封装1.请求封装2.响应封装 3.增删改查1.查询2.分页3.新增和编辑4.删除 4.跨域和自定义异常5.JWT鉴权1.配置pom2.拦截前端请求的拦截器3.生成token并验证token4.登录后生成token5.前端获取…

Grafana如何实现折线柱状图

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

竞赛选题 车位识别车道线检测 - python opencv

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 车位识别车道线检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) …

从六个方面对比Go和Python的差异

您是否想过 Go 与 Python 之间的主要区别是什么&#xff1f;随着对软件开发人员的需求不断增加&#xff0c;选择哪种编码语言可能会很困难。 ​ 在此&#xff0c;我们将从六个方面对比Go和Python,探讨 Go 和 Python之间的差异。我们将讨论它们的特点、优缺点&#xff0c;以便…

GPT、GPT-2、GPT-3论文精读笔记

视频&#xff1a;GPT&#xff0c;GPT-2&#xff0c;GPT-3 论文精读【论文精读】_哔哩哔哩_bilibili MAE论文&#xff1a;把bert用回计算机视觉领域 CLIP论文&#xff1a;打通文本和图像 GPT 论文&#xff1a;Improving Language Understanding by Generative Pre-Training …

史诗级云故障敲响警钟,应用保障不能没有“连续键”!

近日&#xff0c;知名云服务商出现一次史诗级的云故障&#xff1a;全球所有区域/所有服务同时异常&#xff0c;故障持续长达3小时之多&#xff0c;云上众多应用受到极大影响。 如今&#xff0c;在一个充满不确定性和复杂性的数字化时代&#xff0c;哪怕是顶级云服务商亦不能避…

并行与分布式计算 第9章 算法设计

文章目录 并行与分布式计算 第9章 算法设计9.1 设计过程9.1.1 PCAM设计过程9.1.2 划分9.1.3 通信9.1.4 组合9.1.5 映射 8.2 设计方法8.2.1 划分技术9.2.2 分治9.2.3 平衡树技术9.2.4倍增技术9.2.5 流水线技术9.2.6 破对称技术 并行与分布式计算 第9章 算法设计 9.1 设计过程 …

一张图,了解美格智能高算力AI模组

美格智能高算力A模组&#xff0c;澎湃算力让AI触手可及&#xff01;

数字化背景下,集流体行业的智能制造方法论

行业背景 随着全球对清洁能源需求的不断增加&#xff0c;新能源领域正在迅速崛起&#xff0c;在新能源技术中&#xff0c;锂电池作为一种高效、轻便的能量储存解决方案&#xff0c;正成为主流。而锂电集流体作为锂电池的核心部件&#xff0c;承担着电池内部电流分布的关键角色…

服务号可以迁移到订阅号吗

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;首先我们要看一下服务号和订阅号的主要区别。1、服务号推送的消息没有折叠&#xff0c;消息出现在聊天列表中&#xff0c;会像收到消息一样有提醒。而订阅号推送的消息是折叠的&#xff0c;“订阅号…

分布式篇---第二篇

系列文章目录 文章目录 系列文章目录前言一、你知道哪些分布式事务解决方案?二、什么是二阶段提交?三、什么是三阶段提交?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你…

基于Pytorch框架多人多摄像头摔倒跌倒坠落检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 深度学习在计算机视觉领域的应用已经取得了显著的进展&#xff0c;特别是在多人多摄像头场景下的摔倒跌倒检测。通过…

Vue环境的搭建

1.Vue开发的两种方式 &#xff08;1&#xff09;核心包传统开发模式 基于html/css/js文件&#xff0c;直接引入和辛堡&#xff0c;开发Vue。 &#xff08;2&#xff09;工程化开发模式&#xff1a; 主要是基于构建工具&#xff08;例如,webpack&#xff09;的环境中开发Vue…

福州大学《嵌入式系统综合设计》实验五:图像裁剪及尺寸变换

一、实验目的 在深度学习中&#xff0c;往往需要从一张大图中裁剪出一张张小图&#xff0c;以便适应网络输入图像的尺寸&#xff0c;这可以通过bmcv_image_crop函数实现。 实践中&#xff0c;经常需要对输入图像的尺寸进行调整&#xff0c;以适用于网络输入图片尺寸&#xff0…

查看sql语句执行计划并重建索引

晚上cpu报警显示当前cpu使用率达到90%以上&#xff0c;不到10%的空闲 先查询当前sql&#xff1a; #&#xff08;ORACLE&#xff09; SQL > set line 200 pages 1000 col event for a30 col program for a30 col username for a12 col sql_id for a15 col INST_ID for 9999 …

前端开发学习 (二) 事件修饰符、系统命令

其实&#xff0c;我们上一章的时候就已经说过了一些系统指令&#xff0c;这里详细介绍一下 一、v-on的事件修饰符 事件作用click点击时触发submit表单被提交时触发input输入框发生改变时触发keyup按键松开时触发keydown按键按下时触发mouseover鼠标悬停触发mouseout当鼠标移开…

安徽省广德市选择云轴科技ZStack Cloud云平台建设县级智慧城市

信创是数字中国建设的重要组成部分&#xff0c;也是数字经济发展的关键推动力量。作为云基础软件企业&#xff0c;云轴科技ZStack产品矩阵全面覆盖数据中心云基础设施&#xff0c;ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级&#xff0c;是其中唯一兼容四种…