【AJAX学习笔记三】ajax的post请求及其请求主体请求头的设置

article/2025/11/3 15:19:36

AJAX的post请求及其请求行请求头的设置

一、POST请求

参照上一节的笔记,我们实现了get请求的方法,而POST方法的简单实现和GET方法类似,只需要在前端中将get请求修改为post。

xhr.open('POST', 'http://127.0.0.1:8000/server');

在后端中将其接受类型修改为post即可

app.post('/server', (request, response) => {/设置响应内容
});

通过以上步骤即可实现post方法的简单请求。

二、请求主体的设置

当我们学会了GET和POST方法的简单请求之后,我们知道在POST中我们可以自己设置请求行

//发送请求  可以设置请求主体
xhr.send('a=100&b=300');

在这里插入图片描述

三、请求头的设置

我们可以在设置请求之后且发送请求之前设置请求头

///可以设置请求头(预定义)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//或者可以自定义请求头(自定义)
xhr.setRequestHeader('name', 'aaa');

当我们在前端设置了请求头之后,我们还要在后端设置相应的响应

//响应头 *表示所有头的类型都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');

之后我们就可以在请求中看到我们预定义和自定义的请求头了。
在这里插入图片描述
重要的事情:::
对了,当我们自定义了请求头的时候,我们再次进行发送POST请求的时候会报错,所以我们要把服务器端的POST改成all,代表可以接收任意类型的请求。

当我们要发post请求的请求的时候,在post之前要发一个option请求进行测试,但是我们没有设置option类型的路由,所以我们要将app.post改成app.all.


http://chatgpt.dhexx.cn/article/rPV04cys.shtml

相关文章

Ajax参数对照及Success内容

本文是好久之前参考网上大佬教程,边学习边参考边做笔记,整理的内容,分享下大家学习~ 如果这位大佬看见,请评论留下您的名字和博客地址,我这里修改为【转载】 Ajax参数 jQuery 拥有完整的 Ajax 兼容套件。其中的函数和…

学习AJAX必知必会(2)~Ajax基本使用,设置请求行、请求体、请求头,服务端响应JSON数据

一、Ajax的基本使用 1、核心对象 XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的。 2、发送ajax请求(4个步骤): 创建xhr对象,然后open方法初始化,设置请求方式和请求路径,接着send方法…

尚硅谷AJAX教程

优点&#xff1a;无需刷新页面获取数据&#xff0c;允许你根据用户事件来更新部分页面内容 缺点&#xff1a;没有浏览历史&#xff0c;不能回退&#xff0c;存在跨域&#xff0c;SEO不友好 原生XHR请求 get请求 <body><button>获取数据</button><scri…

AJAX (2) — AJAX请求的基本操作、设置请求参数、发送POST请求,POST设置请求体、AJAX设置请求头信息

目录 一、AJAX请求的基本操作 1.server.js文件 2.GET.html文件 二、AJAX设置请求参数 三、AJAX发送POST请求 1.POST.html文件 2.server.js文件 四、POST设置请求体 五、AJAX设置请求头信息 1.预定义头信息 2.自定义头信息 一、AJAX请求的基本操作 先设计出一个需求&…

css ::after和::before详解

伪元素:before和:after添加的内容默认是inline元素 <style>p:before{content: "hello "}p:after{content: "you are handsome!"}</style><p>xx!</p>等价于下面的html结构:<p><span>hello </span>xxx!<span&g…

深入了解::before 和 ::after 伪元素

点击上方 前端瓶子君&#xff0c;关注公众号 回复算法&#xff0c;加入前端编程面试算法每日一题群 本文从最简单的开始&#xff0c;解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after是什么? ::before和::after可以添加到选择器以创…

:after和:before的作用及使用方法

1. :before 和 :after 的主要作用是在元素内容前后加上指定内容&#xff0c;示例&#xff1a; HTML代码&#xff1a; <p>你好</p> CSS代码&#xff1a; p:before{content: Hello;color: red; } p:after{content: Tom;color: red; } 效果如图&#xff1a; 以上代码…

::before和::after伪元素的用法案例

CSS3中伪类采用单冒号写法&#xff0c;伪元素采用双冒号写法。 伪类举例——:hover,:link,:active,:target。 伪元素举例——::before,::after,::first-letter,::first-line,::selection。 一、介绍 今天写网页时遇到一个问题&#xff0c;视口的背景中插入一个小图标的话&a…

beforeSend 出现跨域问题,header里直接设置token就没问题----Day1

一开始前端调用后端接口出现跨域问题&#xff0c;右键查看元素&#xff0c;会有跨域错误提示&#xff0c;类似下图&#xff0c;后来找后端设置了一下&#xff0c;问题解决。可以登录获取token等参数了。 但是 请求设备列表时&#xff0c;beforeSend 中设置token却失败了&#x…

after和before的作用及使用方法

:after和:before的作用及使用方法 1、 :before 和 :after 的主要作用是在元素内容前后加上指定内容&#xff0c;示例&#xff1a; HTML代码&#xff1a; <p>你好</p>CSS代码&#xff1a; p:before{content: Hello;color: red; } p:after{content: Tom;color: r…

@Before, @BeforeClass, @BeforeEach 和 @BeforeAll之间的不同

1. 不同注解的区别如下&#xff1a; 特性 Junit 4Junit 5 在当前类的所有测试方法之前执行。注解在静态方法上。此方法可以包含一些初始化代码。BeforeClassBeforeAll 在当前类中的所有测试方法之后执行。注解在静态方法上。此方法可以包含一些清理代码。AfterClassAfterAll 在…

HTML中 :before 和 :after 的用法

1. :before 和 :after 的主要作用是在元素内容前后加上指定内容&#xff0c;示例&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEed…

:before和:after的使用方法

伪元素可以让我们很方便的加入一个样式&#xff0c;比如在字体前加一个icon&#xff0c;或者加一个下换线&#xff0c;可以不占一个元素的位置&#xff0c;使用起来也很方便&#xff0c;现在介绍一下使用的方法。 注意&#xff1a;:before和:after中的content是必加项 <!DO…

@Before和@After的区别

通常我们使用JUnit的时候&#xff0c;会有一些方法需要提前或最后执行&#xff0c;则需要如下几种方式进行注解

css中::before ::after的用法

一、介绍 ::before和::after是伪元素&#xff0c;&#xff08;css3中为了与伪类做区别&#xff0c;伪元素采用双冒号的写法&#xff1b;但因为兼容性的问题&#xff0c;所以现在大部分还是统一的单冒号&#xff0c;比如:first-line、:first-letter、:before、:after等&#xf…

:before、:after伪元素的用法 !

:after 伪元素在元素之后添加内容。:before伪元素在元素之前添加内容。 这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地&#xff0c;这个伪元素是行内元素&#xff0c;不过可以使用属性 dispiay 改变这一点。 &#xff1a;before和&#xff1a;&#xff1a;be…

CSS中的:before和 :after

1. &#xff1a;before和 &#xff1a;after CSS中的:befor、:after都会创建一个伪元素&#xff0c;其中:befor创建的伪元素是所选元素的第一个子元素&#xff0c;:after创建的伪元素是所选元素的最后一个子元素。 :befor、:after创建的伪元素**默认样式为内联样式**。 &…

::before和::after伪元素的用法

一、介绍 css3为了区分伪类和伪元素&#xff0c;伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content&#xff0c;用于在css渲…

after::和before::的用法

:after和:before的作用及使用方法 1. :before 和 :after 的主要作用是在元素内容前后加上指定内容&#xff0c;示例&#xff1a; HTML代码&#xff1a; <p>你好</p> CSS代码&#xff1a; p:before{content: Hello;color: red; } p:after{content: Tom;color: red;…

before 和after的用法

转载自&#xff1a;lur88 一、介绍 css3为了区分伪类和伪元素&#xff0c;伪元素采用双冒号写法。(:before和:after是在CSS2中提出来的&#xff0c;CSS3中的写法是::before和::after) 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,…