一、Ajax的使用
1.1) 在app.js创建新路由
// 创建路由 注意:路由一定是在监听端口的前面
app.get('/responseData', (req, res) => {
// send方法也可以输入json对象
res.send({"name":"黄超帅", "age": 18, "hobby": "玩滑板"});
// res.send({"name":"黄超帅"});
})
== 注意 ==
路由的创建必须要放在端口的监听之前,否则无法运行
1.2)在public文件夹新建一个html文件
<script type="text/javascript">
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求,以什么方式发送请求 ———— 1)请求方式 2)请求地址
// 【open方法】 XXX.open(method: String, URL: String)
xhr.open('get', 'http://localhost:8822/responseData')
// 3.发送请求
// 【send方法】 XXX.send(body?: Document|BodyInit|null)
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function () {
// 因为在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转化为对象字符串进行传输
console.log(xhr.responseText)
console.log(typeof xhr.responseText)
// 解决方法:
let responseText = JSON.parse(xhr.responseText);
console.log(responseText);
console.log(typeof responseText)
// 在页面显示数据
let str = '<h2>' + responseText.name + '</h2>';
let str2 = '<h2>年龄:' + responseText.age + '</h2>';
let str3 = '<h2>爱好:' + responseText.hobby + '</h2>';
document.body.innerHTML = str + str2 + str3;
}
</script>
1.3) 在浏览器输入xhr.open()方法中的url地址,开始运行
———————————————————————————————————————
上一篇:
Ajax学习日志(一)
下一篇:
Ajax学习日志(三)