使用ajax,获取笑话。

最新推荐文章于 2022-07-19 04:38:42 发布

GISer_CV攻城狮

最新推荐文章于 2022-07-19 04:38:42 发布

阅读量274

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44011559/article/details/113961475

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用JavaScript的jQuery库通过AJAX从API获取笑话并显示在网页上。用户点击‘点我有笑话’按钮后，内容_div会填充从API获取的3条笑话内容。涉及到的技术包括jQuery、AJAX、JSON数据解析以及前端页面动态更新。

摘要由CSDN通过智能技术生成

<body>
    <button class="btnJoke" style="height: 50px;width: 100px;background-color: rgb(23, 189, 240);">点我有笑话</button>
    <div class="content_div" style="background-color: burlywood;height: 600px;width: 500px;color: crimson;font-size: 20px;">
    </div>
</body>
<script>
    $(".btnJoke").on("click", function() {
        getContent();
    });

    function getContent() {
        $.ajax({
            type: "GET", //默认为get
            url: "https://autumnfish.cn/api/joke/list?num=3",
            async: "true",
            data: {
                name: function() {
                    return 1;
                }
            },
            //当dataType为script时，默认为false,
            //设置为false将不会从浏览器缓存中加载请求信息。在使用ajax进行文件上传的时候需要将其设为false
            cache: "true",
            //在一般的get、post的普通请求使用processData:false会导致请求出错，无法正常参数的绑定，
            //在FormData的情况进行文件的上传之类的就必须要设processData:false
            processData: "true",
            contentType: 'application/json;charset=utf-8',
            //beforeSend
            dataType: "json",
            success: function(data) {
                $(".content_div").html("");
                for (var i = 0; i < data.jokes.length; i++) {
                    $(".content_div").append(data.jokes[i]);
                    $(".content_div").append("</br></br>");
                }
            },
            error: function(ex) {
                console.log("获取图件列表失败");
            }
        });
    };

GISer_CV攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ajax,获取笑话。

<body> <button class="btnJoke" style="height: 50px;width: 100px;background-color: rgb(23, 189, 240);">点我有笑话</button> <div class="content_div" style="background-color: burlywood;height: 600px;width: 500px;color: crimson;font-siz
复制链接

扫一扫

专栏目录