Ajax入门（三）
一、如何传递get请求参数1.1) 在app.js创建新路由1.2) 在public文件夹新建一个html文件1.3）运行一、如何传递get请求参数
1.1) 在app.js创建新路由
之前的app.js的初始化内容
// 创建路由 注意：路由一定是在监听端口的前面app.get('/get', (req, res) =>{// req.query：获取URL的查询参数串【Express知识】res.send(req.query);})
1.2) 在public文件夹新建一个html文件
<p><label><input type="text" id="userName" placeholder="姓名："></label></p><p><label><input type="password" id="userPsw" placeholder="密码："></label></p><p><input type="button" value="提交" id="btn"></p><script type="text/javascript">// 1.绑定btnlet btn = document.getElementById("btn");// 2.绑定userName和userPsw,获取姓名和密码let userName = document.getElementById("userName");let userPsw = document.getElementById("userPsw");// 3.为按钮添加点击事件btn.onclick = function () {// 3.1 创建Ajax对象let xhr = new XMLHttpRequest();// 3.2 获取用户在文本框中输入的值let nameValue = userName.value;let pswValue = userPsw.value;// 3.3 拼接请求参数let params = 'userName=' + nameValue + '&userPassword=' + pswValue;// 3.4 配置Ajax对象xhr.open('get', 'http://localhost:8822/get?' + params);// 3.5 发送请求xhr.send();// 3.6获取服务器响应的数据xhr.onload = function () {console.log(xhr.responseText)}}</script>
1.3）运行
在控制台可以看到输出的xhr.responseText的内容，同时打开【网络】的【Fetch/XHR】，也可以清晰看到完整的url路径。
Ajax的服务器响应方面：
1） responseText 属性： 返回字符串形式的响应。
2） esponseXML 属性： 返回 XML 形式的响应数据。
== 注意 ==
如果未在app.js入口文件中创建关于这个html文件的路由，那么将会报404错误。
———————————————————————————————————————
上一篇：
Ajax学习日志（二）
下一篇：
Ajax学习日志（四）
如果觉得《Ajax学习日志（三）—— 如何传递get请求参数》对你有帮助，请点赞、收藏，并留下你的观点哦！
