Ajax学习笔记-get请求参数-3

article/2025/11/3 7:56:23

在这里插入图片描述
传统的表单内容会变成请求参数,自动拼接到对应的位置。get会放在请求地址的后面,post会放在请求体当中。
但是在Ajax中, 我们需要自己拼接请求参数,然后根据请求参数的不同,将请求参数放置在不同的位置。

在这里插入图片描述
路由:

app.get('/get',(req,res)=>{res.send(req.query)
})

html文件:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p><input type="text" id="username" /></p><p><input type="text" id="age" /></p><p><input type="button" value="提交" id="btn"></p><script type="text/javascript">var btn=document.getElementById("btn")var username=document.getElementById('username')var age=document.getElementById('age')btn.onclick=function(){var xhr=new XMLHttpRequest()var nameValue=username.valuevar ageValue=age.value//手动拼接请求参数var params='username='+ nameValue +'&age='+ageValuexhr.open('get','http://localhost:3000/get?'+params)xhr.send()xhr.onload=function(){console.log(xhr.responseText)}}</script></body>
</html>

重点在这几句代码:

//手动拼接请求参数var params='username='+ nameValue +'&age='+ageValuexhr.open('get','http://localhost:3000/get?'+params)xhr.send()xhr.onload=function(){console.log(xhr.responseText)}

先是在客户端填写好相关信息:
在这里插入图片描述
然后获取这些信息,手动拼接路径,设置ajax传递的服务器地址(带上这个拼接好的带参数的地址)
通过ajax传递给服务器

				var params='username='+ nameValue +'&age='+ageValuexhr.open('get','http://localhost:3000/get?'+params)xhr.send()

服务器通过对应的路由,接收对应的请求:并通过express处理参数成字符串,存储在req.query中。

app.get('/get',(req,res)=>{res.send(req.query)
})

然后利用res.send()将响应存储在ajax对象xhr的responseText属性里面:
最后ajax接收到服务器的响应,就会调用下面这个函数,将responseText属性里面的值打印出来。

				xhr.onload=function(){console.log(xhr.responseText)}

http://chatgpt.dhexx.cn/article/5FDI2xTr.shtml

相关文章

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

AJAX的post请求及其请求行请求头的设置 一、POST请求 参照上一节的笔记&#xff0c;我们实现了get请求的方法&#xff0c;而POST方法的简单实现和GET方法类似&#xff0c;只需要在前端中将get请求修改为post。 xhr.open(POST, http://127.0.0.1:8000/server);在后端中将其接受…

Ajax参数对照及Success内容

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

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

一、Ajax的基本使用 1、核心对象 XMLHttpRequest&#xff0c;AJAX 的所有操作都是通过该对象进行的。 2、发送ajax请求&#xff08;4个步骤&#xff09;&#xff1a; 创建xhr对象&#xff0c;然后open方法初始化&#xff0c;设置请求方式和请求路径&#xff0c;接着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;…