ajax() 方法用于执行 AJAX（异步 HTTP）请求。
语法
$.ajax({name:value, name:value, ... })
jQuery 调用 ajax 方法
格式：$.ajax({});
参数：
type：请求方式GET/POST
url: 请求地址 url
async：是否一步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
使用 AJAX 请求改变 <div> 元素的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>
</body>
</html>
按钮点击输入数据案例分析：
我们给 button 按钮绑定了一个点击事件，当点击时，我们就把数据设置到一个无序列表中，然后追加到 body 标签里面，就可以在页面看到数据，整体页面是没有刷新的（不会闪一下，增强了用户交互体验感）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax</title>
</head>
<body>
<button id="bt">查询数据</button>
</body>
<script src="js/jquery-3.6.0.js"></script>
<script>
$('#bt').click(function () {
$.ajax({
type: "get", // 请求方式
url: "js/data.txt", // 请求路径
dataType: "json", // 预期返回一个 json 类型数据
success: function (data) { // data是形参名，代表返回的数据
// Dom 操作
// 创建 ul
var ul = $('<ul></ul>');
// 遍历 data
for (let i = 0; i < data.length; i++) {
// 创建 li
var li = '<li>' + data.userName + '</li>';
// 将 li 追加到 ul 中
ul.append(li);
}
// 将 ul 追加到 body 中
$("body").append(ul);
}
});
});
</script>
</html>
|
