接口的基本使用

代码（html,css,js）

<!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"><title>Document</title><style>*{padding: 0;margin: 0;}table, td, th {border: 1px solid black;text-align: center;}table {width: 100%;border-collapse: collapse;/*合并相邻的边框 */}</style>
</head>
<body><!-- 数据展示 --><table><thead><tr><th>标题</th><th>图片</th><th>日期</th></tr></thead><tbody><!-- <tr><td>娄星区与涟源市开展同心美丽乡村观摩交流活动</td><td><img src="https://dfzximg02.dftoutiao.com/news/20211125/20211125183639_badc269909dfbefdd8b3ed648352b9a7_1_mwpm_03201609.jpeg" alt=""></td><td>2021-11-25 18:36:00</td></tr> --></tbody></table><script src="js/jquery-1.11.0.min.js"></script><script>// 后台返回的json数据var data1={"reason":"success","result":{"stat":"1","data":[{"uniquekey":"256a9d8497359563b52496b18bb37783","title":"娄星区与涟源市开展同心美丽乡村观摩交流活动","date":"2021-11-25 18:36:00","category":"国内","author_name":"人民资讯","url":"https://mini.eastday.com/mobile/211125183639873914340.html","thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183639_badc269909dfbefdd8b3ed648352b9a7_1_mwpm_03201609.jpeg","is_content":"1"},{"uniquekey":"c63640e81d8bda9898bb02c564d7883a","title":"创建全国文明城市 文旅人在行动 | 平凉市图书馆开展服务礼仪专题培训","date":"2021-11-25 18:36:00","category":"国内","author_name":"人民资讯","url":"https://mini.eastday.com/mobile/211125183639692548540.html","thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183639_f83b3804c1a1274e0b998afef5d34f11_1_mwpm_03201609.jpeg","is_content":"1"}],"page":"5","pageSize":"10"},"error_code":0}var data2={"reason":"success","result":{"stat":"1","data":[{"uniquekey":"7e084d69008e150f4579ab40d9da6c43","title":"我为群众办实事｜西湖街道：联手送法进企业","date":"2021-11-25 18:36:00","category":"国内","author_name":"人民资讯","url":"https://mini.eastday.com/mobile/211125183638837305105.html","thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_76169b2a03ebd48bd7a0e29613edf433_1_mwpm_03201609.jpeg","thumbnail_pic_s02":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_76169b2a03ebd48bd7a0e29613edf433_2_mwpm_03201609.jpeg","is_content":"1"},{"uniquekey":"8d48293bce94f60d951126d8bc1674fe","title":"杭州又一老小区圆了“燃气梦”","date":"2021-11-25 18:36:00","category":"国内","author_name":"人民资讯","url":"https://mini.eastday.com/mobile/211125183638760184094.html","thumbnail_pic_s":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_5ffca521f9abe8a693f502e460223b11_1_mwpm_03201609.jpeg","thumbnail_pic_s02":"https://dfzximg02.dftoutiao.com/news/20211125/20211125183638_5ffca521f9abe8a693f502e460223b11_2_mwpm_03201609.jpeg","is_content":"1"}],"page":"5","pageSize":"10"},"error_code":0}   // 动态加载数据function showData(data){// js对象:js字符串var htmlStr=`<tr><td>${data.result.data[0].title}</td><td><img src="${data.result.data[0].thumbnail_pic_s}" alt=""></td><td>${data.result.data[0].date}</td></tr>`;console.log(htmlStr);// jquery对象：var $tr=$(htmlStr);$("tbody").append($tr);}showData(data1);showData(data2);</script>
</body>
</html>

显示效果

总结

js对象与jquery对象的相互转化
es6新语法模板字符串插值用法`${变量}`
json数据的处理

【js调用后端接口】相关推荐

vue.js 调用java_Vue.js调用后端java接口的实例代码
Vue.js调用后端java接口的实例代码发布于 2020-11-30| 复制链接分享一篇关于Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧 ...
小程序---调用后端接口的方法
小程序---调用后端接口的方法学习小程序一段时间了,写页面对我来说没有任何问题.最近学习如何请求后端接口,本来想请求项目中正在用的接口,可是无缘,微信小程序不允许.官方给出的提示是,接口必须有域名且 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
Vue调用后端接口http ajax请求组件封装及proxyTable跨域问题解决超详细案例
前端调用后端接口,使用axios,因为v-resource组件官方已不再维护了: res形参封装了整个响应结果: Vue提供的proxyTable组件用于解决跨域问题:(服务器与服务器之间的相互请求不 ...
前端调用后端接口的错误(400)
前端调用后端接口时,浏览器debug出现Failed to load resource: the server responded with a status of 400 (Bad Request) ...
Nginx解决前端调用后端接口跨域问题
Nginx解决前端调用后端接口跨域问题参考文章: (1)Nginx解决前端调用后端接口跨域问题 (2)https://www.cnblogs.com/wangymd/p/11200746.html ...
vue调用接口修改密码_vue开发前后端分离前端如何调用后端接口？
对前后端分离如何调用接口这块感觉一直没怎么弄明白,但又不知如何说明,下面我模拟一个项目说明我的问题. 现在我们有个项目,前端用vue开发,后端php开发,后端测试地址为:localhost:8181, ...
前端如何调用后端接口
前端可以通过 Ajax,Fetch API,Axios 等方式调用后端接口. Ajax:使用 XMLHttpRequest 对象或者使用现代浏览器提供的 fetch() API. Fetch API: ...
vue 移动端音乐(3) amp;amp;gt;热门歌单推荐部分（webpack-dev-conf.js做后端接口代理+scroll插件）
1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改reque ...

【js调用后端接口】

接口的基本使用

接口的基本使用

代码（html,css,js）

显示效果

总结

【js调用后端接口】相关推荐

最新文章

热门文章