JavaWeb基础专项复习6（2）——AJAX补充
目录
1、load(url, [data], [callback])
1.1 语法
1.2概述
1.3参数
url,[data,[callback]]String,Map/String,CallbackV1.0
1.4示例
HTML 代码:
jQuery 代码:
2、get(url, [data], [callback], [type])
2.1 语法
2.2 概述
2.3 参数
url,[data],[callback],[type]String,Map,Function,StringV1.0
2.4 示例
3、post(url, [data], [callback], [type])
3.1 语法
3.2 概述
3.3 参数
url,[data],[callback],[type]String,Map,Function,StringV1.0
3.4 示例
发送AJAX请求的一些其他方法
1、load(url, [data], [callback])
1.1 语法
jQuery.load(url, [data], [callback])1.2概述
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。
1.3参数
url,[data,[callback]]String,Map/String,CallbackV1.0
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。
1.4示例
加载文章侧边栏导航部分至一个无序列表。
HTML 代码:
<div id="result"></div>
<button id="loadData">Load Data</button>jQuery 代码:
<script>
$(document).ready(function () {
$('#loadData').click(function () {
$('#result')
.load('test.jsp', function (responseText, statusText, xhr) {
if (statusText === 'success') {
console.log('数据加载成功');
} else if (statusText === 'error') {
console.log('请求出错: ' + xhr.status);
}
})
.css('color', 'red'); // 链式调用，设置加载内容的文本颜色为红色
});
});
</script>在上述示例中，$('#result').load('test.html', ...) 调用 load() 方法从 test.html 文件加载数据并插入到 #result 元素中。由于 load() 方法返回一个 jQuery 对象，所以可以接着调用 css() 方法来设置加载内容的文本颜色为红色。
2、get(url, [data], [callback], [type])
2.1 语法
jQuery.get(url, [data], [callback], [type])2.2 概述
通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
2.3 参数
url,[data],[callback],[type]String,Map,Function,StringV1.0
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
2.4 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery.get() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchData">Fetch Data</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchData').click(function () {
$.get('https://jsonplaceholder.typicode.com/posts/1', function (data, textStatus, jqXHR) {
if (textStatus === 'success') {
$('#result').html(`
<p>标题：${data.title}</p>
<p>内容：${data.body}</p>
`);
}
}, 'json');
});
});
</script>
</body>
</html>在上述示例中，点击按钮会触发 $.get() 请求，从 https://jsonplaceholder.typicode.com/posts/1 获取一篇文章的数据，并将文章的标题和内容显示在页面上。 
3、post(url, [data], [callback], [type])
3.1 语法
jQuery.post(url, [data], [callback], [type])3.2 概述
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
3.3 参数
url,[data],[callback],[type]String,Map,Function,StringV1.0
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
3.4 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery.post() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="submitData">Submit Data</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#submitData').click(function () {
const jqXHR = $.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
}, 'json');
jqXHR.done(function (data) {
$('#result').html(`
<p>新文章 ID：${data.id}</p>
<p>标题：${data.title}</p>
<p>内容：${data.body}</p>
`);
}).fail(function (jqXHR, textStatus, errorThrown) {
$('#result').text('请求失败：' + errorThrown);
});
});
});
</script>
</body>
</html>在这个示例中，点击按钮会触发 $.post() 请求，向 https://jsonplaceholder.typicode.com/posts 发送一篇新文章的数据，根据请求结果在页面上显示相应信息。
