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

一、图片请求 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 = $('' + (i + 1) + '' + ele.title + ' + ele.url + ' />');
            $('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>Documenttitle>
    <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 = $('' + (i + 1) + '' + ele.title + ' + ele.url + ' />');
                $('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>Documenttitle>
    <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 = $('' + $num + '' + ele.userName + '' + ele.title + '');
                $('table').append($tr);
                // console.log(i);
                // console.log(list[i].title);
            });
        });
    script>
body>

html>

五、总结接口地址是从网上扒拉过来的，详情见博客：
https://blog.csdn.net/c__chao/article/details/78573737图片在页面不显示，处理方法：在头部加入代码：

<meta name="referrer" content="no-referrer">

视频：https://api.apiopen.top/api/getHaoKanVideo?page=0&size=10
图片：https://api.apiopen.top/api/getImages?page=0&size=4
后边的参数可更改，size指的是数据的条数。async: false, //实现ajax的同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它 *** 作必须等待请求完成才可以执行。从聚合找到的接口没法在前台直接使用，一般是后台用的多，需要对接口进行处理。所以有时候前端拿过来直接用，光报错。数据来源于网络，如有侵权，请告知，我将立即删除。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1297997.html