mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 22:50:54 +08:00
80 lines
2.2 KiB
HTML
80 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Title</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<h2 id="title"></h2>
|
|||
|
|
<div id="content"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
var xhr = new XMLHttpRequest();
|
|||
|
|
|
|||
|
|
// 设置请求类型和 URL
|
|||
|
|
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
|
|||
|
|
|
|||
|
|
// 设置响应类型
|
|||
|
|
xhr.responseType = 'json';
|
|||
|
|
|
|||
|
|
// 设置请求完成后的回调函数
|
|||
|
|
xhr.onload = function () {
|
|||
|
|
if (this.status === 200) {
|
|||
|
|
// 如果 HTTP 状态码为 200，则成功获取数据
|
|||
|
|
var data = this.response; // 获取服务器响应的数据
|
|||
|
|
console.log(data); // 在控制台打印数据
|
|||
|
|
document.getElementById("title").innerHTML = data.title;
|
|||
|
|
document.getElementById("content").innerHTML = data.body;
|
|||
|
|
} else {
|
|||
|
|
// 如果 HTTP 状态码不是 200，则打印错误信息
|
|||
|
|
console.error('Error: ' + this.status);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 设置请求错误时的回调函数
|
|||
|
|
xhr.onerror = function () {
|
|||
|
|
console.error('Request failed');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 发送请求
|
|||
|
|
xhr.send();
|
|||
|
|
|
|||
|
|
|
|||
|
|
// xhr post例子
|
|||
|
|
let xhr2 = new XMLHttpRequest();
|
|||
|
|
xhr2.responseType = 'json';
|
|||
|
|
xhr2.contentType = 'application/x-www-form-urlencoded',
|
|||
|
|
// 设置请求完成后的回调函数
|
|||
|
|
xhr2.onload = function () {
|
|||
|
|
if (this.status === 200 || this.status === 201) {
|
|||
|
|
// 如果 HTTP 状态码为 200，则成功获取数据
|
|||
|
|
var data = this.response; // 获取服务器响应的数据
|
|||
|
|
console.log(data); // 在控制台打印数据
|
|||
|
|
} else {
|
|||
|
|
// 如果 HTTP 状态码不是 200，则打印错误信息
|
|||
|
|
console.error('Error: ' + this.status);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 设置请求错误时的回调函数
|
|||
|
|
xhr2.onerror = function () {
|
|||
|
|
console.error('Post failed');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 设置发送的数据
|
|||
|
|
let form = new FormData();
|
|||
|
|
form.append("title", "my title");
|
|||
|
|
form.append('body', 'my body');
|
|||
|
|
form.append('userId', '2000');
|
|||
|
|
// 设置请求类型和 URL
|
|||
|
|
xhr2.open('POST', "https://jsonplaceholder.typicode.com/posts");
|
|||
|
|
// 发送请求
|
|||
|
|
xhr2.send(form);
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</html>
|