来，案例之前，容我分享一下js如何发送请求。

原生js发送请求：

let xhr= new XMLHttpRequest();
// methods：GET/POST请求方式等，url：请求地址，true异步（可为false同步）
xhr.open("methods","url" ,true);
xhr.send();                                            // 发送
xhr.onreadystatechange = function() {                  // 判断
    if (xhr.readyState == 4 && ajax.status == 200) {   // 成功，接收到数据
            console.log(xhr.response);                 // 查看返回的数据(可输出 xhr 哈)
            //JSON.parse(xhr.response);                // 如果数据为字符串的对象，可转换一下
        }else if(xhr.status == 404) {                  // 失败，页面未找到
        }
    }
}

ajax发送请求：

// https://www.bootcdn/        （上面有jquery等开源库，自己引入jquery）

$.ajax({
    type:"",                //请求方式
    url:"",                 //路径
    async:true,             //是否异步
    dataType:"json",        //返回数据的格式
    success:function(res){  //成功的回调函数
       console.log(res);    //res代表返回的数据，可以随心所欲处理数据啦
    }
})

话不多说，上代码 ==>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #404040;
        }
        header{
            width: 1000px;
            height: 40px;
            line-height: 40px;            
            margin: 20px auto;
            font-size: 28px;
            font-weight: 600;
            text-align: center;
        }
        .box{
            width: 1000px;
            margin: 10px auto 0px;
        }
        .box::after{
            content: "";
            display: block;
            clear: both;
        }
        .boxli{
            width: 25%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #eee;
        }
        .tupian{
            display: block;
            width: 100%;
        }
        .title{
            width: 100%;
            line-height: 30px;
            font-size: 26px;
            font-weight: 600;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .passtime{
            width: 100%;
            height: 24px;
            line-height: 24px;
            margin: 10px 0;
            text-align: right;
            font-size: 18px;
        }
        .tuImg{
            width: 100%;
            height: 20vh;
        }
    </style>
    <script src="https://cdn.bootcdn/ajax/libs/jquery/3.6.0/jquery.js"></script>

</head>
<body>
    <header> js采用ajax发送请求获取新闻 </header>
    <ul class="box">
        <!-- <li class="boxli">
            <a class="tupian" href="">
                <p class="title"></p>
                <div class="passtime"></div>
                <img src="" alt="" class="tuImg">
            </a>
        </li> -->
    </ul>
    <script>
        let box = document.querySelector('.box');
        $.ajax({
            type: 'post',
            url: "https://api.apiopen.top/getWangYiNews",
            async: true,
            dataType: "json",
            success: function(res) {
                console.log(res);
                let data = res.result;
                let html = '';
                for (let i = 0; i < data.length; i++) {
                    html += "<li class='boxli'>";
                        html += '<a class="tupian" href="'+ data[i].path +'">'
                            html += '<p class="title">'+ data[i].title  +'</p>';
                            html += '<div class="passtime">'+ data[i].passtime +'</div>'
                            html += '<img src="'+ data[i].image +'" alt="'+ data[i].title +'" class="tuImg">'
                        html+= '</a>'
                    html += "</li>"
                }
                box.innerHTML = html;
            }
        })
    </script>
</body>
</html>

 讲解：

  1.  采用ajax的方式发送请求；
  2.  通过定义html变量，拼接标签，最后放入ul标签中
    • 此处可以采用拼接
    • 当然，还有es6的模板引擎   ``   里面直接放标签即可，无需拼接，数据 ${数据} 

模板引擎用法（将拼接处代码换成以下代码）：

html += `<li class="boxli">
            <a class="tupian" href="${data[i].path}">
                <p class="title">${data[i].title}</p>
                <div class="passtime">${data[i].passtime}</div>
                <img src="${data[i].image}" alt="图片无法显示，请检查网络是否正常" class="tuImg">
            </a>
        </li>`

在VsCode中，Tab键是往后缩进，Shift+Tab是往前缩进。

该项目接口采用网站为开源社区的API接口文档地址

开源社区

有人恶意刷接口，导致接口调用频繁，接口已经不能稳定运行，所以计划近期下线，积德吧朋友，如果长期如此，所有接口将面临关闭。 

所以，不要滥用哈！

 更多es6新特性，可以查看我的笔记

作者的es6总结

或者，阮一峰的es6（真正的大牛）

阮一峰的es6

更多推荐

js采用ajax发送请求获取数据（实例操作）