AJAX
AJAX = Asynchronous JavaScript and XML (异步的J avascript和XML)。
Ajax
$.ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button" id="btn">按钮</button>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
type:"get",
url:"https://api.vvhan.com/api/hotlist/zhihuHot", // 请求地址
data:{
uanme:"zhangsan" // 如果没有参数，则不需要设置
},
// dataType:"json", // 预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json格式
success:function(data){
console.log(data) // data 字符串 转为 json对象
var data = data["data"];
console.log(data)
}})
// 点击按钮 发送ajax请求 将数据显示到页面中
$("#btn").click(function() {
$.ajax({
type:"get",
url:"https://api.vvhan.com/api/hotlist/zhihuHot", // 请求地址
data:{
uanme:"zhangsan" // 如果没有参数，则不需要设置
},
// dataType:"json", // 预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json格式
success:function(data){
console.log(data) // data 字符串 转为 json对象
var data = data["data"];
// console.log(obj)
// 1.DOM操作 2.创建ul
var ul = $("<ul></ul>");
// 3.返回遍历的数据数组
for (let i = 0; i < data.length; i++) {
// 得到数组中的每一个元素
var user = data[i];
// 创建li元素
var li = "<li>" + user.title + "</li>";
// 将 li 元素设置到ul元素中
ul.append(li);
}
console.log(ul);
// 将ul设置到body标签中
$("body").append(ul);
}
})
})
</script>
</html>
$.get $.post $.getJSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.get("https://api.vvhan.com/api/hotlist/zhihuHot",{},function(data){
console.log(data["data"])
})
$.post("https://api.vvhan.com/api/hotlist/zhihuHot",{},function(data){
console.log(data["data"])
})
// $getJson() 请求返回的数据是JSON格式的ajax请求
$.getJSON("https://api.vvhan.com/api/hotlist/zhihuHot",{},function(data){
console.log(data["data"]) // 如果返回的数据不是JSON格式 则无法获取
})
</script>
</html>
