使用AJAX 请求网络API”每日一文”
的小案例
废话不说直接看效果
演示地址
:
https://forevercz.github.io/meiwen/
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>每日一文</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding-top: 20px;
}
p::first-letter {
color: lightcoral;
font-size: 28px;
font-style: italic;
}
p {
font-family: "Microsoft YaHei";
font-size: 18px;
/* 两端对齐 */
text-align: justify;
/* 首行缩进 */
text-indent: 18px;
/* 设置字体之间的距离 */
letter-spacing: 2px;
/* 行高 */
line-height: 35px;
}
</style>
</head>
<body>
<p class="getText">正在加载.....</p>
<script type="text/javascript">
let p = document.querySelector(".getText")
let data = "";
let http = new XMLHttpRequest();
// 监听请求状态
http.onreadystatechange = function() {
// 当 readyState 等于 4 且状态为 200 时，表示响应已就绪
if (this.readyState === 4 && this.status === 200) {
var text = JSON.parse(this.responseText).data.content;
document.body.style.backgroundColor = "lightcyan";
p.innerHTML = text;
}
}
// 发起请求
http.open("POST", "https://v1.alapi.cn/api/mryw/random");
http.setRequestHeader("Content-Type", "application/x-www-form-urlencode");
http.send(data);
</script>
</body>
</html>
版权声明：本文为qq_41039734原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。