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>
