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.rhkb.cn/news/202209.html

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

相关文章

中职组网络安全B模块-渗透提权2

任务五&#xff1a;渗透提权2 任务环境说明&#xff1a; 仅能获取xxx的IP地址 用户名&#xff1a;test&#xff0c;密码&#xff1a;123456 访问服务器主机&#xff0c;找到主机中管理员名称&#xff0c;将管理员名称作为Flag值提交&#xff1b; Flag:doyoudoyoudo 访问服…

数组对象判重最佳实践

数组对象判重最佳实践 赶紧挣钱&#xff0c;回家过年… 1.问题回顾 deviceSelectedRow(row) {this.ElectricalPartList.push(row)}&#xff0c;在此方法中&#xff0c;ElectricalPartList需要多次push进去数据&#xff0c;但是row可能存在重复&#xff0c;如何判重呢&#xff…

从裸机启动开始运行一个C++程序(十三)

前序文章请看&#xff1a; 从裸机启动开始运行一个C程序&#xff08;十二&#xff09; 从裸机启动开始运行一个C程序&#xff08;十一&#xff09; 从裸机启动开始运行一个C程序&#xff08;十&#xff09; 从裸机启动开始运行一个C程序&#xff08;九&#xff09; 从裸机启动开…

使用Pytorch从零开始构建WGAN

引言 在考虑生成对抗网络的文献时&#xff0c;Wasserstein GAN 因其与传统 GAN 相比的训练稳定性而成为关键概念之一。在本文中&#xff0c;我将介绍基于梯度惩罚的 WGAN 的概念。文章的结构安排如下&#xff1a; WGAN 背后的直觉&#xff1b;GAN 和 WGAN 的比较&#xff1b;…

求解Beamforming-SOCP(CVX求解)

时间&#xff1a;2023年11月23日14:00:16&#xff1a; 直接上代码&#xff08;辛苦两天才改出来的&#xff09; clear all; K 4; %user number N4; %base station number var1e-9; H []; %initialize H matrix for i1:Kh 1/sqrt(2*K)*mvnrnd(zeros(N,1),eye(N),1)1i/sqrt(2*…

探针台的发展趋势

随着半导体技术的不断发展和市场需求的增长&#xff0c;探针台也在不断进步和创新。以下是探针台的一些发展趋势&#xff1a; 自动化与智能化&#xff1a;为提高测试效率和减少人为误差&#xff0c;探针台正朝着更高程度的自动化和智能化发展。例如&#xff0c;通过引入机器视…

JS PromiseLike 的判定与使用

目录 一. $.ajax()返回值遇到的问题二. Promise A 规范三. 判断是否为PromiseLike3.1 判断ES6的new Promise()3.2 判断包含then方法的对象3.3 判断$.ajax()返回的对象 一. $.ajax()返回值遇到的问题 当我们执行如下js代码时&#xff0c;可以看到$.ajax()执行后&#xff0c;得到…

计算机网络的OSI七层模型

目录 1、OSI七层模型是什么 1.1 物理层&#xff08;Physical Layer&#xff09; 1.2 数据链路层&#xff08;Data Link Layer&#xff09; 1.3 网络层&#xff08;Network Layer&#xff09; 1.4 传输层&#xff08;Transport Layer&#xff09; 1.5 会话层&#xff08;S…

杨传辉:从一体化架构,到一体化产品,为关键业务负载打造一体化数据库

在刚刚结束的年度发布会上&#xff0c;OceanBase正式推出一体化数据库的首个长期支持版本 4.2.1 LTS&#xff0c;这是面向 OLTP 核心场景的全功能里程碑版本&#xff0c;相比上一个 3.2.4 LTS 版本&#xff0c;新版本能力全面提升&#xff0c;适应场景更加丰富&#xff0c;有更…

一篇文章,教你看懂加密工具The Enigma Protector

The Enigma Protector作为一款专业的软件授权和保护工具&#xff0c;一直以来深受开发者喜爱&#xff0c;此次携手慧都合作上线&#xff0c;更加方便了国内用户的购买和使用&#xff0c;一起来看看这款工具都有哪些值得期待的地方↓↓↓ The Enigma Protector 是一款专门设计用…

机器学习第11天:降维

文章目录 机器学习专栏 主要思想 主流方法 1.投影 二维投射到一维 三维投射到二维 2.流形学习 一、PCA主成分分析 介绍 代码 二、三内核PCA 具体代码 三、LLE 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 主要思想 介绍&#xff1a;当一个任务有很多特征…

CTF靶场搭建及Web赛题制作与终端docker环境部署

♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ 写在前面 ╔═══════════════════════════════════════════════════…

Python爬取京东商品销售数据进行数据分析示例代码,以口红为例

文章目录 一、准备工作驱动安装模块使用与介绍 二、流程解析三、完整代码四、效果展示关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资…

【电路笔记】-电流源

电流源 文章目录 电流源1、概述1.1 理想电流源1.2 实际电流源1.3 连接规则 2、依赖电流2.1 压控电流源2.2 电流控制电流源 3、总结 本文为前面文章 电压源的延续&#xff0c;我们将在本文介绍电流源。 与电压源的情况类似&#xff0c;我们将首先介绍理想电流源的概念&#xff…

【数据结构】树的基本概念 | 入门树以及二叉树必熟知

树的学习过程中&#xff0c;二叉树比较重要&#xff0c;但是在学习二叉树之前&#xff0c;得先需要了解到一些数的概念。 树的定义 树是一种非线性的数据结构&#xff0c;它是由 n&#xff08;n > 0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它…

BTS-GAN:基于MRI和条件对抗性网络的乳腺肿瘤计算机辅助分割系统

BTS-GAN: Computer-aided segmentation system for breast tumor using MRI and conditional adversarial networks BTS-GAN&#xff1a;基于MRI和条件对抗性网络的乳腺肿瘤计算机辅助分割系统背景贡献实验方法Parallel dilated convolution module&#xff08;并行扩展卷积模块…

tp8 使用rabbitMQ(1)简单队列

php8.0 使用 rabbitmq 要使用 3.6版本以上的&#xff0c; 并且还要开启 php.ini中的 socket 扩展 php think make:command SimpleMQProduce //创建一个生产者命令行 php think make:command SimpleMQConsumer //创建一个消费者命令行 生产者代码 <?php declare (strict_ty…

为何设计师都在用这个原型样机资源网站?

谈论原型样机素材模板&#xff0c;这个话题对设计师来说如同老朋友一般熟悉。设计师们在创作完毕后&#xff0c;为了更淋漓尽致地展示他们的设计成果&#xff0c;通常会将其放置在真实的样机素材模板中。这种原型样机素材可以让设计作品迅速且清晰地呈现在真实环境中。找到一个…

java游戏制作-飞翔的鸟游戏

一.准备工作 首先创建一个新的Java项目命名为“飞翔的鸟”&#xff0c;并在src中创建一个包命名为“com.qiku.bird"&#xff0c;在这个包内分别创建4个类命名为“Bird”、“BirdGame”、“Column”、“Ground”&#xff0c;并向需要的图片素材导入到包内。 二.代码呈现 …

【每日一题】2216.美化数组的最少删除数-2023.11.21

题目&#xff1a; 2216. 美化数组的最少删除数 给你一个下标从 0 开始的整数数组 nums &#xff0c;如果满足下述条件&#xff0c;则认为数组 nums 是一个 美丽数组 &#xff1a; nums.length 为偶数对所有满足 i % 2 0 的下标 i &#xff0c;nums[i] ! nums[i 1] 均成立 …