Ajax学习日志（三）—— 如何传递get请求参数

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.绑定btn
	       let 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学习日志（四）