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

最新推荐文章于 2023-07-10 16:02:30 发布

笑道三千

最新推荐文章于 2023-07-10 16:02:30 发布

阅读量1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108145949

版权

JS 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

在这里插入图片描述
传统的表单内容会变成请求参数，自动拼接到对应的位置。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.value
				var ageValue=age.value
				//手动拼接请求参数
				var params='username='+ nameValue +'&age='+ageValue
				xhr.open('get','http://localhost:3000/get?'+params)
				xhr.send()
				xhr.onload=function(){
					console.log(xhr.responseText)
				}
			}
		</script>

	</body>
</html>

重点在这几句代码：

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

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

				var params='username='+ nameValue +'&age='+ageValue
				xhr.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)
				}

笑道三千

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习笔记-get请求参数-3

传统的表单内容会变成请求参数，自动拼接到对应的位置。get会放在请求地址的后面，post会放在请求体当中。但是在Ajax中，我们需要自己拼接请求参数，然后根据请求参数的不同，将请求参数放置在不同的位置。路由：app.get('/get',(req,res)=>{ res.send(req.query)})html文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> .
复制链接

扫一扫