Compare commits

...

2 Commits

Author SHA1 Message Date
8fb38039ef 更换bootstrap cdn 2024-10-06 11:22:18 +08:00
cb0a11bf88 edit 2024-10-06 11:13:05 +08:00
6 changed files with 327 additions and 120 deletions

View File

@ -25,10 +25,12 @@
- **优势:** 提升用户体验、简化网站维护、提高搜索引擎排名。
#### 3.2.2 Bootstrap框架的使用 (了解)
- **安装:** 可以通过 CDN 或下载源文件安装 Bootstrap。
- **栅格系统:** 基于12列的布局系统使用列和行来创建响应式布局。
- **组件:** 提供了一组丰富的 UI 组件,如按钮、表格、导航栏等。
- **定制:** 可以根据项目需求定制 Bootstrap 的样式和 JavaScript 插件。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
参考[Bootstrap 教程](https://www.runoob.com/bootstrap/bootstrap-intro.html)
### 3.3 AJAX与异步请求处理
@ -39,100 +41,91 @@
- **事件监听:** 监听 `onreadystatechange` 事件来获取服务器响应的状态。
- **请求方法:** `open` 方法设置请求类型和URL`send` 方法发送请求。
```javascript
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求类型和 URL
xhr.open('GET', 'https://api.example.com/data', true);
// 设置响应类型
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.onerror = function () {
console.error('Request failed');
};
// 发送请求
xhr.send();
// 创建 XMLHttpRequest 对象
let 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); // 在控制台打印数据
} else {
// 如果 HTTP 状态码不是 200则打印错误信息
console.error('Error: ' + this.status);
}
};
// 设置请求错误时的回调函数
xhr.onerror = function () {
console.error('Request failed');
};
// 发送请求
xhr.send();
```
#### 3.3.2 Fetch API和Promise (掌握)
- **Fetch API** 是一个现代替代 XMLHttpRequest 的 API提供了更简洁的语法和基于 Promise 的接口。
- **基本语法:** `fetch(url)`返回一个 Promise 对象。
```javascript
// 定义请求的 URL
const url = 'https://api.example.com/data';
// 使用 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);
})
.catch(error => {
// 处理任何发生的错误
console.error('There has been a problem with your fetch operation:', error);
});
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 链中抛出的错误。
>
> * 使用 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 => {
// 发送 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 => {
}).then(data => {
console.log(data);
})
.catch(error => {
}).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 字符串。
```
> 在这个示例中,发送了一个包含 JSON 数据的 POST 请求,并在请求头中指定了 Content-Type 为 application/json。body 参数包含了要发送的数据,通过 JSON.stringify 方法将其转换为 JSON 字符串。
- **处理响应:** 使用`.then()`处理响应,如`.json()`或`.text()`。
- **错误处理:** 使用`.catch()`处理网络错误或其他异常。
@ -145,28 +138,32 @@ fetch('https://api.example.com/data', {
- **例子**
```javascript
// 使用 $.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: '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);
}
});
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);
}
});
```
**示例说明:**
@ -188,20 +185,21 @@ $.ajax({
如果想发送 POST 请求或附加数据,可以使用 `$.ajax()` 方法并设置相应的参数。下面是一个发送 POST 请求并附加数据的示例:
```javascript
$.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);
}
});
//发送 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);
}
});
```
在这个示例中:

View File

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

View File

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

View File

@ -5,8 +5,11 @@
<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">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <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>
<!-- 引入自定义 JavaScript 文件 -->
<script src="app.js" defer></script>

View File

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

View File

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