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.创建ulvar 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>
![[羊城杯 2020]Blackcat1](https://i-blog.csdnimg.cn/direct/1f540352b08446b7ad52b1eac870ad98.png)