AJAX Jquery $.get $.post $.getJSON

news2025/1/29 14:01:41

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>