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

传统的表单内容会变成请求参数，自动拼接到对应的位置。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)}

Ajax学习笔记-get请求参数-3相关推荐

Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节全局 ...
golang学习笔记8 beego参数配置打包linux命令
golang学习笔记8 beego参数配置打包linux命令参数配置 - beego: 简约 & 强大并存的 Go 应用框架 https://beego.me/docs/mvc/contr ...
[原创]Saltstack学习笔记：命令参数详解以及配置文件说明
很久没有更新saltstack的文章了,今天还是来更新一点,又开始对saltstack复习了一下. 前边写了一点<saltstack入门概述(1)>以及<Saltstack如何安装( ...
oracle修改asm参数文件,学习笔记:Oracle RAC参数文件管理修改创建asm中的spfile文件...
天萃荷净 Oracle rac创建修改asm中的spfile文件内容 create spfile to asm --查看sid SQL> show parameter instance_name ...
Redis运维和开发学习笔记(4) Redis参数意义
Redis运维和开发学习笔记(4) Redis参数意义文章目录 Redis运维和开发学习笔记(4) Redis参数意义参数意义参数意义 Client连接问题 id=567800790 addr ...
HALCON 21.11：深度学习笔记---设置超参数(5)
HALCON 21.11:深度学习笔记---设置超参数(5) HALCON 21.11.0.0中,实现了深度学习方法.关于超参数的有关设置内容如下: 不同的DL方法是为不同的任务设计的,它们的构建方式 ...
VBA 学习笔记 - 网络请求
VBA 学习笔记 - 网络请求 Microsoft.XMLHTTP MSXML2.serverXMLHTTP.6.0 WinHttp.WinHttpRequest.5.1 参考资料 Microsoft ...
AJAX学习笔记（基本使用，请求参数传递，获取服务端响应，错误处理，低版本IE浏览器缓存问题及解决）
1. Ajax实现步骤创建ajax对象 let xhr = new XMLHttpRequest(); 告诉ajax请求地址及请求方式 xhr.open('get','http://www.exam ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
2.3）深度学习笔记：超参数调试、Batch正则化和程序框架
目录 1)Tuning Process 2)Using an appropriate scale to pick hyperparameters 3)Hyperparameters tuning in ...

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

Ajax学习笔记-get请求参数-3相关推荐

最新文章

热门文章