mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 14:40:55 +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> |