ajax调用接口文档,进行数据渲染的模板

简介: ajax调用接口文档,进行数据渲染的模板

完整代码,可复制微调

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

</head>

<body>

       <div id="aaa">

         

       </div>

</body>


<script>

$.ajax({

   type: "post",

   url: "接口文档链接",

   data: {

         请求参数

   },

   success: function(dd) {

       console.log(dd);

       let aaa = document.querySelector('#aaa');

       let d = '';

       for (let i = 0; i < dd.data.length; i++) {

           d += '';

       }

       aaa.innerHTML = d;

   }

})

</script>

</html>

1.url后面写接口文档链接

2.data里写请求参数,例如:

    data: {
          id:13
    }

如果没有请求参数,就不用写

3.请求成功的话,console.log(dd)会打印出来;请求失败,则打印不出来,或者报错

4.获取Html里的元素,进行字符串拼接

for循环遍历接口文档里的数据,然后字符串拼接,例如:

d += '<div><img src=" ' + kk.data[i].imgs + ' " alt="" class="center_img"></div>';

5.将遍历出来我们需要的数据渲染到页面即可

遍历的方法,和渲染的方法,不清楚的,可参见前文。

相关文章
|
7月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
46 3
|
2月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
63 0
|
2月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
107 0
|
7月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
3月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
234 2
|
6月前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20
|
6月前
|
PHP
php+ajax传file文件数据
php+ajax传file文件数据
52 0
|
7月前
|
XML 前端开发 JavaScript
CSR(客户端渲染)和AJAX在Web开发中各自扮演不同的角色
【5月更文挑战第8天】CSR(客户端渲染)与AJAX在Web开发中各司其职。CSR提供初始HTML框架,通过JavaScript在浏览器端获取并渲染数据,提升交互性和响应速度。AJAX则实现页面局部更新,如实时搜索,不刷新页面即可获取数据。CSR可能因DOM操作多而引发性能问题,但可优化解决;AJAX适合频繁交互场景,提高响应性。两者在不同需求下各有优势,需按项目选择适用技术。
69 4
|
7月前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
62 0