whz/java-web
1
0
Fork 0
mirror of https://gitee.com/many2many/java-web.git synced 2025-01-11 22:50:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: whz:8fb38039ef474c4f1df75eb73dcf89f8e91d5fe3
Branches Tags
whz:master
..
compare: whz:3204d35e53c4699db68a4251133f618655d5a801
Branches Tags
whz:master

No commits in common. "8fb38039ef474c4f1df75eb73dcf89f8e91d5fe3" and "3204d35e53c4699db68a4251133f618655d5a801" have entirely different histories.
8fb38039ef ... 3204d35e53

6 changed files with 124 additions and 331 deletions
Show Stats Expand all files Collapse all files

84
docs/chapter03.md
View File

@ -25,12 +25,10 @@
- **优势：** 提升用户体验、简化网站维护、提高搜索引擎排名。 - **优势：** 提升用户体验、简化网站维护、提高搜索引擎排名。
#### 3.2.2 Bootstrap框架的使用 (了解) #### 3.2.2 Bootstrap框架的使用 (了解)
- **安装：** 可以通过 CDN 或下载源文件安装 Bootstrap。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 - **栅格系统：** 基于12列的布局系统，使用列和行来创建响应式布局。
- **组件：** 提供了一组丰富的 UI 组件，如按钮、表格、导航栏等。
参考[Bootstrap 教程](https://www.runoob.com/bootstrap/bootstrap-intro.html) - **定制：** 可以根据项目需求定制 Bootstrap 的样式和 JavaScript 插件。
### 3.3 AJAX与异步请求处理 ### 3.3 AJAX与异步请求处理
@ -42,10 +40,10 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- **请求方法：** `open` 方法设置请求类型和URL，`send` 方法发送请求。 - **请求方法：** `open` 方法设置请求类型和URL，`send` 方法发送请求。
```javascript ```javascript
// 创建 XMLHttpRequest 对象 // 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
// 设置请求类型和 URL // 设置请求类型和 URL
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true); xhr.open('GET', 'https://api.example.com/data', true);
// 设置响应类型 // 设置响应类型
xhr.responseType = 'json'; xhr.responseType = 'json';
@ -75,57 +73,66 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- **基本语法：** `fetch(url)`返回一个 Promise 对象。 - **基本语法：** `fetch(url)`返回一个 Promise 对象。
```javascript ```javascript
const url = 'https://jsonplaceholder.typicode.com/posts/1'; // 定义请求的 URL
const url = 'https://api.example.com/data';
// 使用 fetch 发送 GET 请求 // 使用 fetch 发送 GET 请求
fetch(url).then(response => { fetch(url)
.then(response => {
// 检查响应状态 // 检查响应状态
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
// 解析 JSON 响应 // 解析 JSON 响应
return response.json(); return response.json();
}).then(data => { })
.then(data => {
// 处理解析后的 JSON 数据 // 处理解析后的 JSON 数据
console.log(data); console.log(data);
document.getElementById("title").innerHTML = data.title; })
document.getElementById("content").innerHTML = data.body; .catch(error => {
}).catch(error => {
// 处理任何发生的错误 // 处理任何发生的错误
console.error('There has been a problem with your fetch operation:', error); console.error('There has been a problem with your fetch operation:', error);
}); });
``` ```
代码解释： 代码解释：
>
> * 使用 fetch(url) 发送 GET 请求。 * 使用 fetch(url) 发送 GET 请求。
> * 使用 .then() 方法处理响应。第一个 .then() 接受响应对象，并检查其状态。 * 使用 .then() 方法处理响应。第一个 .then() 接受响应对象，并检查其状态。
> * 如果响应状态码不在 200-299 范围内，则抛出一个错误。 * 如果响应状态码不在 200-299 范围内，则抛出一个错误。
> * 使用 response.json() 解析 JSON 响应，并返回解析后的数据。 * 使用 response.json() 解析 JSON 响应，并返回解析后的数据。
> * 第二个 .then() 处理解析后的 JSON 数据。 * 第二个 .then() 处理解析后的 JSON 数据。
> * 使用 .catch() 方法处理任何在前面的 Promise 链中抛出的错误。 * 使用 .catch() 方法处理任何在前面的 Promise 链中抛出的错误。
----- -----
```javascript ```javascript
// 发送 POST 请求并附加请求头 // 发送 POST 请求并附加请求头
fetch('https://jsonplaceholder.typicode.com/posts', { fetch('https://api.example.com/data', {
method: 'POST', // 或 'PUT' method: 'POST', // 或 'PUT'
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
// 其他头部信息... // 其他头部信息...
}, },
body: JSON.stringify({ title: 'axjax入门', body: 'abcdefghijklmn', userId: 1 }) // 转换为 JSON 字符串 body: JSON.stringify({ key: 'value' }) // 转换为 JSON 字符串
}).then(response => { })
.then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
return response.json(); return response.json();
}).then(data => { })
.then(data => {
console.log(data); console.log(data);
}).catch(error => { })
.catch(error => {
console.error('There has been a problem with your fetch operation:', error); console.error('There has been a problem with your fetch operation:', error);
}); });
``` ```
代码解释： 代码解释：
> 在这个示例中，发送了一个包含 JSON 数据的 POST 请求，并在请求头中指定了 Content-Type 为 application/json。body 参数包含了要发送的数据，通过 JSON.stringify 方法将其转换为 JSON 字符串。 ```text
在这个示例中，发送了一个包含 JSON 数据的 POST 请求，并在请求头中指定了 Content-Type 为 application/json。body 参数包含了要发送的数据，通过 JSON.stringify 方法将其转换为 JSON 字符串。
```
- **处理响应：** 使用`.then()`处理响应，如`.json()`或`.text()`。 - **处理响应：** 使用`.then()`处理响应，如`.json()`或`.text()`。
- **错误处理：** 使用`.catch()`处理网络错误或其他异常。 - **错误处理：** 使用`.catch()`处理网络错误或其他异常。
@ -138,27 +145,23 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- **例子** - **例子**
```javascript ```javascript
let url = 'https://jsonplaceholder.typicode.com/posts/1'; // 使用 $.get() 方法发送 GET 请求
$.get(url, function(data, textStatus, jqXHR) { $.get('https://api.example.com/data', function(data, textStatus, jqXHR) {
console.log('Data received:', data); console.log('Data received:', data);
console.log('Text Status:', textStatus); console.log('Text Status:', textStatus);
console.log('jqXHR:', jqXHR); console.log('jqXHR:', jqXHR);
document.getElementById("title").innerHTML = data.title;
document.getElementById("content").innerHTML = data.body;
}).fail(function(jqXHR, textStatus, errorThrown) { }).fail(function(jqXHR, textStatus, errorThrown) {
console.error('Request failed:', textStatus, errorThrown); console.error('Request failed:', textStatus, errorThrown);
}); });
// 或者使用 $.ajax() 方法发送 GET 请求 // 或者使用 $.ajax() 方法发送 GET 请求
$.ajax({ $.ajax({
url: url, url: 'https://api.example.com/data',
type: 'GET', type: 'GET',
success: function(data, textStatus, jqXHR) { success: function(data, textStatus, jqXHR) {
console.log('Data received:', data); console.log('Data received:', data);
console.log('Text Status:', textStatus); console.log('Text Status:', textStatus);
console.log('jqXHR:', jqXHR); console.log('jqXHR:', jqXHR);
document.getElementById("title2").innerHTML = data.title;
document.getElementById("content2").innerHTML = data.body;
}, },
error: function(jqXHR, textStatus, errorThrown) { error: function(jqXHR, textStatus, errorThrown) {
console.error('Request failed:', textStatus, errorThrown); console.error('Request failed:', textStatus, errorThrown);
@ -185,19 +188,18 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
如果想发送 POST 请求或附加数据，可以使用 `$.ajax()` 方法并设置相应的参数。下面是一个发送 POST 请求并附加数据的示例： 如果想发送 POST 请求或附加数据，可以使用 `$.ajax()` 方法并设置相应的参数。下面是一个发送 POST 请求并附加数据的示例：
```javascript ```javascript
//发送 POST 请求
$.ajax({ $.ajax({
url: 'https://jsonplaceholder.typicode.com/posts', url: 'https://api.example.com/data',
type: 'POST', type: 'POST',
data: { title: 'axjax入门', body: 'abcdefghijklmn', userId: 1 }, // 附加数据 data: { key: 'value' }, // 附加数据
contentType: 'application/x-www-form-urlencoded', // 默认值，可以省略 contentType: 'application/x-www-form-urlencoded', // 默认值，可以省略
success: function(data, textStatus, jqXHR) { success: function(data, textStatus, jqXHR) {
console.log('Post Data received:', data); console.log('Data received:', data);
console.log('Post Text Status:', textStatus); console.log('Text Status:', textStatus);
console.log('Post jqXHR:', jqXHR); console.log('jqXHR:', jqXHR);
}, },
error: function(jqXHR, textStatus, errorThrown) { error: function(jqXHR, textStatus, errorThrown) {
console.error('Post failed:', textStatus, errorThrown); console.error('Request failed:', textStatus, errorThrown);
} }
}); });
``` ```

80
examples/chapter03/XMLHttpRequest.html
View File

@ -1,80 +0,0 @@
<!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>

57
examples/chapter03/fetch.html
View File

@ -1,57 +0,0 @@
<!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>
const url = 'https://jsonplaceholder.typicode.com/posts/1';
// 使用 fetch 发送 GET 请求
fetch(url).then(response => {
// 检查响应状态
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 解析 JSON 响应
return response.json();
}).then(data => {
// 处理解析后的 JSON 数据
console.log(data);
document.getElementById("title").innerHTML = data.title;
document.getElementById("content").innerHTML = data.body;
}).catch(error => {
// 处理任何发生的错误
console.error('There has been a problem with your fetch operation:', error);
});
// 发送 POST 请求并附加请求头
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // 或 'PUT'
headers: {
'Content-Type': 'application/json',
// 其他头部信息...
},
body: JSON.stringify({ title: 'axjax入门', body: 'abcdefghijklmn', userId: 1 }) // 转换为 JSON 字符串
}).then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
}).then(data => {
console.log(data);
}).catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
</script>
</html>

7
examples/chapter03/index.html
View File

@ -5,11 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Example</title> <title>Fetch API Example</title>
<!-- 引入 Bootstrap --> <!-- 引入 Bootstrap -->
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
<!-- 引入自定义 JavaScript 文件 --> <!-- 引入自定义 JavaScript 文件 -->
<script src="app.js" defer></script> <script src="app.js" defer></script>

12
examples/chapter03/jquery-index.html
View File

@ -3,14 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery Ajax Example</title> <title>Fetch API Example with jQuery</title>
<!-- 引入 Bootstrap --> <!-- 引入 Bootstrap -->
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
<!-- 引入 jQuery --> <!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入自定义 JavaScript 文件 --> <!-- 引入自定义 JavaScript 文件 -->
@ -18,7 +14,7 @@
</head> </head>
<body> <body>
<div class="container mt-5"> <div class="container mt-5">
<h1 class="mb-4">JQuery Ajax Example</h1> <h1 class="mb-4">Fetch API Practice with jQuery</h1>
<!-- GET 请求按钮 --> <!-- GET 请求按钮 -->
<button id="getButton" class="btn btn-primary mb-3">GET Request</button> <button id="getButton" class="btn btn-primary mb-3">GET Request</button>

65
examples/chapter03/jquery.html
View File

@ -1,65 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div>
<h2 id="title"></h2>
<div id="content"></div>
</div>
<div>
<h2 id="title2"></h2>
<div id="content2"></div>
</div>
</body>
<script>
let url = 'https://jsonplaceholder.typicode.com/posts/1';
$.get(url, function(data, textStatus, jqXHR) {
console.log('Data received:', data);
console.log('Text Status:', textStatus);
console.log('jqXHR:', jqXHR);
document.getElementById("title").innerHTML = data.title;
document.getElementById("content").innerHTML = data.body;
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error('Request failed:', textStatus, errorThrown);
});
// 或者使用 $.ajax() 方法发送 GET 请求
$.ajax({
url: url,
type: 'GET',
success: function(data, textStatus, jqXHR) {
console.log('Data received:', data);
console.log('Text Status:', textStatus);
console.log('jqXHR:', jqXHR);
document.getElementById("title2").innerHTML = data.title;
document.getElementById("content2").innerHTML = data.body;
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('Request failed:', textStatus, errorThrown);
}
});
//发送 POST 请求
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
type: 'POST',
data: { title: 'axjax入门', body: 'abcdefghijklmn', userId: 1 }, // 附加数据
contentType: 'application/x-www-form-urlencoded', // 默认值，可以省略
success: function(data, textStatus, jqXHR) {
console.log('Post Data received:', data);
console.log('Post Text Status:', textStatus);
console.log('Post jqXHR:', jqXHR);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('Post failed:', textStatus, errorThrown);
}
});
</script>
</html>