封装ajax

星赫德is

已于 2023-06-19 09:39:38 修改

阅读量43

点赞数

文章标签： ajax 数学建模前端

于 2023-06-19 09:36:49 首次发布

本文链接：https://blog.csdn.net/2201_75476723/article/details/131280842

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>

<body>
    <div class="newss"></div>
    <div></div>
</body>

</html>

<script>

//封装ajax
    function ajax_(methods, url, callback) {

        var ajax_ = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');

        var result;

        ajax_.open(methods, url);

        ajax_.send();

        ajax_.onreadystatechange = function () {

            if (ajax_.readyState == 4) {

                if (ajax_.status == 200) {

                    result = ajax_.responseText;

                    result = JSON.parse(result);

                    callback(result);

                } else {

                    console.log('请求失败');

                }

            }

        }

    }



    // 使用方法 示例

    ajax_('get', 'http://www.chenfuguo.cn:5600/news', function (result) {

        if (result.status == 200) {

            let news = result.news.data;

            let content = document.getElementsByClassName('newss')[0];

            for (var data of news) {

                var item = document.createElement('div');

                content.innerHTML += `
        <div class="newsFor">
                    <div class="newsSingle">

                            <img src="${data.picUrl}" alt="">

                    <div class="newsContent">

                        <div class="contentFont">

                            <p>${data.title}</p>

                            <span>${data.content}</span>

                        </div>

                        <div class="contentImg">

                            <p class="times">${data.time}</p>

                            <img src="./img/you.png" alt="">

                        </div>

                    </div>

                        </div>

                </div>`



            }

        }

    });
</script>