本文详细介绍了jQuery中的Ajax使用，包括$.ajax、$.get、$.post和$.getJSON的方法，通过实例解析了如何进行异步数据请求，提升用户体验，避免页面刷新。
jQuery Ajax
Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。
- 同步：
- 现在的大部分请求都是基于同步，所谓同步就是说必须等待请求之后给我返回结果了我才能继续往下操作。好比你要烧水，切菜，做饭。现在是同步，你必须等水烧开再去干其他事情。
- 异步：
- 异步就是，请求发送之后，不管你是否返回结果，我继续往下操作。比如，你烧水的同时，不管水烧没烧开，你继续你其他的工作，去切菜。
- 刷新：
- 类似我们的
<a></a>标签的点击链接，以及表单元素的提交，都会刷新页面，你会感觉到你们网页闪一下，然后你之前做的操作全没了。好比你刷微博点个赞，然后整个页面刷新了，又是从头开始，或内容都变了（做个比方，不会改变）。- 无刷新：
- 刷朋友圈点个赞，不会整个页面都刷新而是“赞”出现在该出现的地方
下面用的 jQuery 封装好的 Ajax
1.$.ajax
jQuery 调用 ajax 方法
格式：$.ajax({});
参数：
type：请求方式GET/POST
url: 请求地址 url
async：是否一步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
敲代码练手：
先创建我们要访问的数据，暂时没有后端
代码：我们只写必要，常用的参数
<script src="js/jquery-3.6.0.js"></script>
<script>
$.ajax({
type: "get", // 请求方式
url: "js/data.txt", // 请求路径
dataType: "json", // 预期返回一个 json 类型数据
success: function (data) {
// data是形参名，代表返回的数据
console.log(data);
}
});
</script>
看浏览器控制台输出
把查询出来的数据展示在页面中，即放入到 body 标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax</title>
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
