jquery案例14——ajax、请求接口、处理接口返回数据
生活随笔
收集整理的這篇文章主要介紹了
jquery案例14——ajax、请求接口、处理接口返回数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、圖片請求
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},//全部 默認傳0async: 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>六、總結
https://blog.csdn.net/c__chao/article/details/78573737
圖片：https://api.apiopen.top/api/getImages?page=0&size=4
后邊的參數可更改，size指的是數據的條數。
接口數據來源于網絡，如有侵權，請告知，我將立即刪除。
總結
以上是生活随笔為你收集整理的jquery案例14——ajax、请求接口、处理接口返回数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CRM销售管理的三个步骤
- 下一篇： C++ 调用结构体（年龄最大学员）