mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 22:50:54 +08:00
Compare commits
No commits in common. "8fb38039ef474c4f1df75eb73dcf89f8e91d5fe3" and "3204d35e53c4699db68a4251133f618655d5a801" have entirely different histories.
8fb38039ef
...
3204d35e53
@ -25,12 +25,10 @@
|
||||
- **优势：** 提升用户体验、简化网站维护、提高搜索引擎排名。
|
||||
|
||||
#### 3.2.2 Bootstrap框架的使用 (了解)
|
||||
|
||||
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
|
||||
|
||||
参考[Bootstrap 教程](https://www.runoob.com/bootstrap/bootstrap-intro.html)
|
||||
|
||||
|
||||
- **安装：** 可以通过 CDN 或下载源文件安装 Bootstrap。
|
||||
- **栅格系统：** 基于12列的布局系统，使用列和行来创建响应式布局。
|
||||
- **组件：** 提供了一组丰富的 UI 组件，如按钮、表格、导航栏等。
|
||||
- **定制：** 可以根据项目需求定制 Bootstrap 的样式和 JavaScript 插件。
|
||||
|
||||
### 3.3 AJAX与异步请求处理
|
||||
|
||||
@ -41,91 +39,100 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
|
||||
- **事件监听：** 监听 `onreadystatechange` 事件来获取服务器响应的状态。
|
||||
- **请求方法：** `open` 方法设置请求类型和URL，`send` 方法发送请求。
|
||||
```javascript
|
||||
// 创建 XMLHttpRequest 对象
|
||||
let xhr = new XMLHttpRequest();
|
||||
// 创建 XMLHttpRequest 对象
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
// 设置请求类型和 URL
|
||||
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
|
||||
// 设置请求类型和 URL
|
||||
xhr.open('GET', 'https://api.example.com/data', true);
|
||||
|
||||
// 设置响应类型
|
||||
xhr.responseType = 'json';
|
||||
// 设置响应类型
|
||||
xhr.responseType = 'json';
|
||||
|
||||
// 设置请求完成后的回调函数
|
||||
xhr.onload = function () {
|
||||
if (this.status === 200) {
|
||||
// 如果 HTTP 状态码为 200，则成功获取数据
|
||||
var data = this.response; // 获取服务器响应的数据
|
||||
console.log(data); // 在控制台打印数据
|
||||
} else {
|
||||
// 如果 HTTP 状态码不是 200，则打印错误信息
|
||||
console.error('Error: ' + this.status);
|
||||
}
|
||||
};
|
||||
// 设置请求完成后的回调函数
|
||||
xhr.onload = function () {
|
||||
if (this.status === 200) {
|
||||
// 如果 HTTP 状态码为 200，则成功获取数据
|
||||
var data = this.response; // 获取服务器响应的数据
|
||||
console.log(data); // 在控制台打印数据
|
||||
} else {
|
||||
// 如果 HTTP 状态码不是 200，则打印错误信息
|
||||
console.error('Error: ' + this.status);
|
||||
}
|
||||
};
|
||||
|
||||
// 设置请求错误时的回调函数
|
||||
xhr.onerror = function () {
|
||||
console.error('Request failed');
|
||||
};
|
||||
// 设置请求错误时的回调函数
|
||||
xhr.onerror = function () {
|
||||
console.error('Request failed');
|
||||
};
|
||||
|
||||
// 发送请求
|
||||
xhr.send();
|
||||
// 发送请求
|
||||
xhr.send();
|
||||
```
|
||||
#### 3.3.2 Fetch API和Promise (掌握)
|
||||
- **Fetch API：** 是一个现代替代 XMLHttpRequest 的 API，提供了更简洁的语法和基于 Promise 的接口。
|
||||
- **基本语法：** `fetch(url)`返回一个 Promise 对象。
|
||||
|
||||
```javascript
|
||||
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);
|
||||
});
|
||||
```
|
||||
代码解释：
|
||||
>
|
||||
> * 使用 fetch(url) 发送 GET 请求。
|
||||
> * 使用 .then() 方法处理响应。第一个 .then() 接受响应对象，并检查其状态。
|
||||
> * 如果响应状态码不在 200-299 范围内，则抛出一个错误。
|
||||
> * 使用 response.json() 解析 JSON 响应，并返回解析后的数据。
|
||||
> * 第二个 .then() 处理解析后的 JSON 数据。
|
||||
> * 使用 .catch() 方法处理任何在前面的 Promise 链中抛出的错误。
|
||||
-----
|
||||
// 定义请求的 URL
|
||||
const url = 'https://api.example.com/data';
|
||||
|
||||
```javascript
|
||||
// 发送 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 => {
|
||||
// 使用 fetch 发送 GET 请求
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
// 检查响应状态
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
// 解析 JSON 响应
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
})
|
||||
.then(data => {
|
||||
// 处理解析后的 JSON 数据
|
||||
console.log(data);
|
||||
}).catch(error => {
|
||||
})
|
||||
.catch(error => {
|
||||
// 处理任何发生的错误
|
||||
console.error('There has been a problem with your fetch operation:', error);
|
||||
});
|
||||
```
|
||||
代码解释：
|
||||
> 在这个示例中，发送了一个包含 JSON 数据的 POST 请求，并在请求头中指定了 Content-Type 为 application/json。body 参数包含了要发送的数据，通过 JSON.stringify 方法将其转换为 JSON 字符串。
|
||||
|
||||
* 使用 fetch(url) 发送 GET 请求。
|
||||
* 使用 .then() 方法处理响应。第一个 .then() 接受响应对象，并检查其状态。
|
||||
* 如果响应状态码不在 200-299 范围内，则抛出一个错误。
|
||||
* 使用 response.json() 解析 JSON 响应，并返回解析后的数据。
|
||||
* 第二个 .then() 处理解析后的 JSON 数据。
|
||||
* 使用 .catch() 方法处理任何在前面的 Promise 链中抛出的错误。
|
||||
|
||||
-----
|
||||
|
||||
```javascript
|
||||
// 发送 POST 请求并附加请求头
|
||||
fetch('https://api.example.com/data', {
|
||||
method: 'POST', // 或 'PUT'
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
// 其他头部信息...
|
||||
},
|
||||
body: JSON.stringify({ key: 'value' }) // 转换为 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);
|
||||
});
|
||||
```
|
||||
代码解释：
|
||||
```text
|
||||
在这个示例中，发送了一个包含 JSON 数据的 POST 请求，并在请求头中指定了 Content-Type 为 application/json。body 参数包含了要发送的数据，通过 JSON.stringify 方法将其转换为 JSON 字符串。
|
||||
```
|
||||
|
||||
- **处理响应：** 使用`.then()`处理响应，如`.json()`或`.text()`。
|
||||
- **错误处理：** 使用`.catch()`处理网络错误或其他异常。
|
||||
@ -138,32 +145,28 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
|
||||
- **例子**
|
||||
|
||||
```javascript
|
||||
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);
|
||||
});
|
||||
// 使用 $.get() 方法发送 GET 请求
|
||||
$.get('https://api.example.com/data', function(data, textStatus, jqXHR) {
|
||||
console.log('Data received:', data);
|
||||
console.log('Text Status:', textStatus);
|
||||
console.log('jqXHR:', jqXHR);
|
||||
}).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);
|
||||
}
|
||||
});
|
||||
// 或者使用 $.ajax() 方法发送 GET 请求
|
||||
$.ajax({
|
||||
url: 'https://api.example.com/data',
|
||||
type: 'GET',
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
console.log('Data received:', data);
|
||||
console.log('Text Status:', textStatus);
|
||||
console.log('jqXHR:', jqXHR);
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
console.error('Request failed:', textStatus, errorThrown);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**示例说明：**
|
||||
@ -185,21 +188,20 @@ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
|
||||
如果想发送 POST 请求或附加数据，可以使用 `$.ajax()` 方法并设置相应的参数。下面是一个发送 POST 请求并附加数据的示例：
|
||||
|
||||
```javascript
|
||||
//发送 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);
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: 'https://api.example.com/data',
|
||||
type: 'POST',
|
||||
data: { key: 'value' }, // 附加数据
|
||||
contentType: 'application/x-www-form-urlencoded', // 默认值，可以省略
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
console.log('Data received:', data);
|
||||
console.log('Text Status:', textStatus);
|
||||
console.log('jqXHR:', jqXHR);
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
console.error('Request failed:', textStatus, errorThrown);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
在这个示例中：
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -5,11 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fetch API Example</title>
|
||||
<!-- 引入 Bootstrap -->
|
||||
<!-- <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.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
|
||||
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- 引入自定义 JavaScript 文件 -->
|
||||
<script src="app.js" defer></script>
|
||||
|
||||
@ -3,14 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JQuery Ajax Example</title>
|
||||
<title>Fetch API Example with jQuery</title>
|
||||
<!-- 引入 Bootstrap -->
|
||||
<!-- <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.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
|
||||
|
||||
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<!-- 引入 jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- 引入自定义 JavaScript 文件 -->
|
||||
@ -18,7 +14,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">JQuery Ajax Example</h1>
|
||||
<h1 class="mb-4">Fetch API Practice with jQuery</h1>
|
||||
|
||||
<!-- GET 请求按钮 -->
|
||||
<button id="getButton" class="btn btn-primary mb-3">GET Request</button>
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user