vue实现显示笑话列表

最新推荐文章于 2022-03-24 20:26:12 发布

崔星星

最新推荐文章于 2022-03-24 20:26:12 发布

阅读量329

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/divaid/article/details/106883982

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jokes</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

<div id = "test">

    <div v-for="item in arr" style="margin:10px">{{item}}</div>


</div>

<script>
    let xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //TODO 添加分页
    const app = new Vue({
        el: "#test",
        data: {
            response: "",
            arr: [],
        },
        methods: {
            getJokes: function () {
                const that = this;

                this.getData("https://autumnfish.cn/api/joke/list?num=100", function (result) {
                    app.response = result;
                    that.arr = JSON.parse(result).jokes;
                })

                // "https://autumnfish.cn/api/joke/list?num=10"
            },

            getData: function (url, success, fail) {
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        if (success) {
                            success(xmlhttp.responseText)
                        }
                    } else {
                        if (fail) {
                            fail(xmlhttp.responseText)
                        }
                    }
                };
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            },
            postData: function (url, params, success, fail) {
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        if (success) {
                            // that.arr = JSON.parse(xmlhttp.responseText).jokes;
                            success(xmlhttp.responseText)
                        }
                    } else {
                        if (fail) {
                            fail(xmlhttp.responseText)
                        }
                    }
                };
                xmlhttp.open(url, true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send(params);
            }
        }

    });

    document.addEventListener("DOMContentLoaded", function(){
        app.getJokes()
    });
</script>
</body>
</html>