菜单 搜索
首页 前端知识 jquery案例14——ajax、请求接口、处理接口返回数据

jquery案例14——ajax、请求接口、处理接口返回数据

2024-05-03 18:05:15 前端知识 前端哥 546 782 我要收藏

一、图片请求

1.案例描述

利用jq中的ajax去请求接口，获取数据，并对数据进行渲染显示到页面上。

2.案例效果演示

请添加图片描述
说明：目前我只请求了4条数据。

3.案例局部代码

css代码：
<style>
  .imgSrc img {
        width: 100px;
        height: 80px;
        object-fit: contain;
    }
    
    table {
        text-align: center;
    }
</style>
html代码：
<table border="1" cellspacing="0" width="600px">
   <tr>
        <th>序号</th>
        <th>壁纸名称</th>
        <th>壁纸图片</th>
    </tr>
</table>
jq代码：
<script>
   $(function() {
        var list = [];
        $.ajax({
            url: "https://api.apiopen.top/api/getImages?page=0&size=4",
            dataType: "json",
            type: "get",
            async: '',
            data: {},
            success: function(res) {
                console.log(res);
                list = res.result.list;
                //也可以直接在这里处理数据
            },
            error: function(res) {
                // console.log(res);
            }
        });
        console.log(list);
        // 展示获取过来的数据,先对其遍历循环，放到行标签里，之后将创建好的元素插入到table中
        $(list).each(function(i, ele) {
            var $tr = $('<tr><td>' + (i + 1) + '</td><td class="name">' + ele.title + '</td><td class="imgSrc"><img src=' + ele.url + ' /></td></tr>');
            $('table').append($tr);
            // console.log(i);
            // console.log(list[i].title);
        });
    });
</script>

4.案例整体代码

<!DOCTYPE html>
<html lang="en">

<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">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <script src="./js/jQuery.min.js"></script>
        <style>
            .imgSrc img {
                width: 100px;
                height: 80px;
                object-fit: contain;
            }
            
            table {
                text-align: center;
            }
        </style>
</head>

<body>
    <table border="1" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>壁纸名称</th>
            <th>壁纸图片</th>
        </tr>
    </table>
    <script>
        $(function() {
            var list = [];
            $.ajax({
                url: "https://api.apiopen.top/api/getImages?page=0&size=4",
                dataType: "json",
                type: "get",
                async: '',
                data: {},
                success: function(res) {
                    console.log(res);
                    list = res.result.list;
                },
                error: function(res) {
                    // console.log(res);
                }
            });
            console.log(list);
            // 展示获取过来的数据
            $(list).each(function(i, ele) {
                var $tr = $('<tr><td>' + (i + 1) + '</td><td class="name">' + ele.title + '</td><td class="imgSrc"><img src=' + ele.url + ' /></td></tr>');
                $('table').append($tr);
                // console.log(i);
                // console.log(list[i].title);
            });
        });
    </script>
</body>

</html>

二、短视频请求代码

1.案例效果

请添加图片描述

2.案例完整代码

<!DOCTYPE html>
<html lang="en">

<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">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <script src="./js/jQuery.min.js"></script>
    <style>
        video {
            width: 100%;
        }
        
        table {
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1" cellspacing="0">
        <tr>
            <th width="50px">序号</th>
            <th width="200px">发布者</th>
            <th width="400px">标题</th>
            <th width="200px">视频</th>
        </tr>
    </table>
    <script>
        $(function() {
            var list = [{}];
            $.ajax({
                url: "https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10",
                // dataType: "json",
                // type: "get",
                async: false, //实现ajax的同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
                // data: {},
                success: function(res) {
                    console.log(res);
                    // console.log(res.result.list);
                    // list = res.result.list;
                },
                error: function(res) {
                    // console.log(res.result.list);
                }
            });
            // console.log(list);
            // 展示获取过来的数据
            $(list).each(function(i, ele) {
                var $num = parseInt(i + 1)
                var $tr = $('<tr><td>' + $num + '</td><td class="name">' + ele.userName + '</td><td>' + ele.title + '</td><td><video src=' + ele.playUrl + ' controls></video></td></tr>');
                $('table').append($tr);
                // console.log(i);
                // console.log(list[i].title);
            });
        });
    </script>
</body>

</html>

五、其他

代码可以进一步封装一下，先这样吧。

<div class="tab_list">
        <ul>
            <li class="active" onclick="getGoodList(this,0)">全部</li>
            {loop $baike $bvv}
            <li onclick="getGoodList(this,{$bvv['id']})">{$bvv['catname']}</li>
            {/loop}
        </ul>
    </div>
    <div class="tab_con">
        <div class="item">
            这里面插入的内容
        </div>
    </div>
</div>

<script>
    //jq初始化加载全部订单
    $(function () {
        $.ajax({
            url: "<?php echo url('fenleinew');?>",//接口地址
            data: {id: 0},//全部 默认传0
            async: false,
            type: 'GET',
            dataType: 'json',
            error: function (err) {
                console.log(err)
            },
            success: function (res) {
                console.log(res);
                list = res.data
            }
        });
        console.log(list);
        // 展示获取过来的数据,先对其遍历循环，放到标签里，之后将创建好的元素插入到盒子中
        $(list).each(function (i, ele) {
            // console.log(i,ele);
            var $dl = $('<dl><dt><a href="#"><img src="' + ele.image + '" alt="" /></a></dt><dd class="dd2"><a href="#">' + ele.title + '</a></dd>' + '<dd class="dd3"><img src="" /><span class="looks">' + ele.num + '</span></dd><dd class="dd4"><div class="left"><img src="{CLOUD_IMG_PATH}home/header.png" />' + ele.username + '</div><div class="right">' + ele.inputtime + '</div></dd></dl>'
            );
            console.log(ele.image);
            $('.item').append($dl);
        });
    })

    function getGoodList(e, id) {
        console.log(id);
        $(e).addClass("active")
        $(e).siblings().removeClass("active")
       //每次切换先清空，否则会叠加
        $('.item').empty();
        var list = [];
        $.ajax({
            url: "<?php echo url('fenleinew');?>",
            data: {id: id},
            async: false,
            type: 'GET',
            dataType: 'json',
            error: function (err) {
                console.log(err)
            },
            success: function (res) {
                console.log(res);
                list = res.data
            }
        });
        console.log(list);
        // 展示获取过来的数据,先对其遍历循环，放到标签里，之后将创建好的元素插入到盒子中
        $(list).each(function (i, ele) {
            console.log(ele.image);
            var $dl = $('<dl><dt><a href="#"><img src="' + ele.image + '"  alt="" /></a></dt><dd class="dd2"><a href="#">' + ele.title + '</a></dd>' + '<dd class="dd3"><img src="" /><span class="looks">' + ele.num + '</span></dd><dd class="dd4"><div class="left"><img src="{CLOUD_IMG_PATH}home/header.png" />' + ele.username + '</div><div class="right">' + ele.inputtime + '</div></dd></dl>'
            );
            console.log($dl);
            $('.item').append($dl);
        });
    }
</script>

六、总结

  1. 接口地址是从网上扒拉过来的，详情见博客：
    https://blog.csdn.net/c__chao/article/details/78573737
  2. 图片在页面不显示，处理方法：在头部加入代码：
<meta name="referrer" content="no-referrer">
  1. 视频：https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10
    图片：https://api.apiopen.top/api/getImages?page=0&size=4
    后边的参数可更改，size指的是数据的条数。
  2. async: false, //实现ajax的同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
  3. 从聚合找到的接口没法在前台直接使用，一般是后台用的多，需要对接口进行处理。所以有时候前端拿过来直接用，光报错。

接口数据来源于网络，如有侵权，请告知，我将立即删除。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6826.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery Ajax 设置请求头

2024-05-08 10:05:25

玩转代码|WordPress后台加载缓慢，加载无样式解决方法

2024-05-08 10:05:20

【JS】使用jQuery制作图片手风琴效果

2024-05-08 10:05:18

h5实现i18n语言切换

2024-05-08 10:05:17

【前端面试】谈谈你对jQuery中的ajax方法的了解

2024-04-20 17:04:44

jQuery报错：Uncaught ReferenceError: $ is not defined解决方法

2024-05-08 10:05:14

JQuery的属性(1)

2024-05-08 10:05:57

jQuery

2024-01-31 12:01:10

jQuery操作指南

2024-05-08 10:05:51

echarts3d柱状图

2024-05-08 10:05:50

大家推荐的文章
1

UE4.27支持HTML5

2024-05-07 13:05:261000
2

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
3

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
4

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
5

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
6

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
7

移动端css布局大全

2024-02-06 15:02:421000
8

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
9

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
10

vue3的两个提示[Vue warn]: 关于组件渲染和函数外部使用

2024-05-05 22:05:07999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！