ajax请求接口,jquery拼接数据循环

简介: ajax请求接口,jquery拼接数据循环

关于上一篇写的文章,jquery拼接数据循环一个数据列表:https://www.jianshu.com/p/d4034550fcf3。如果把json写在接口数据里面,使用ajax来调用,又该怎么样的使用?其实也很简单,首先将数据写在data.json文件里面,使用ajax的url请求之后,进行拼接即可。

data.json

[{
                    "image1": "images/fence/fence1.png",
                    "alarmtype": "sos",
                    "date": "2019-7-3 10:08",
                    "details": "李一男进入二道门危险区域",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "危险",
                    "date": "2019-7-3 10:07",
                    "details": "孙二娘滞留生产车间8小时",
                    "alarmname": "访客"
                },
                {
                    "image1": "images/fence/fence3.png",
                    "alarmtype": "滞留",
                    "date": "2019-7-3 10:00",
                    "details": "马云脱岗窜岗报警",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "脱岗",
                    "date": "2019-7-3 9:36",
                    "details": "王小婷走进办公室区域",
                    "alarmname": "访客"
                }
            ]

参考代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>告警列表</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <style>
            .rightcont {
                height: 80px;
                margin-top: 12px;
                background: #f1f1f1;
                border-radius: 8px;
                padding-top: 15px;
            }           
            .iconalarm {
                float: left;
                width: 20%;
                text-align: center;
            }           
            .detailalarm {
                float: left;
                width: 65%;
            }           
            .namealarm {
                float: left;
                width: 15%;
            }
        </style>
    </head>
    <body>
        <div id="active">
            <ul class="rightalarm">
                <!--右侧报警监控 -->
                <div class="rightcont">
                    <div class="iconalarm">
                        <img src="images/fence/fence2.png" />
                        <p>sos</p>
                    </div>
                    <div class="detailalarm">
                        <p>2019-7-3 10:08</p>
                        <p>王大治发出SOS报警</p>
                    </div>
                    <div class="namealarm">
                        员工
                    </div>
                </div>
            </ul>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
            url: "data.json", //json文件位置
            type: "GET", //请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(data) { //请求成功完成后要执行的方法 
                var html = "";
            $.each(data, function(i, item) { //这里的函数参数是键值对的形式,k代表键名,v代表值                
                html += '<div class="rightcont">';
                html += '<div  class="iconalarm">';
                html += '<img src=' + item.image1 + ' />';
                html += '<p>' + item.alarmtype + '</p> </div>';
                html += '<div  class="detailalarm">';
                html += ' <p>' + item.date + '</p>';
                html += ' <p>' + item.details + '</p></div>';
                html += ' <div  class="namealarm">' + item.alarmname + ' </div></div>';
            });
            $(".rightalarm").append(html);
            }
       })
        })
    </script>
</html>

好了,效果一样的。

相关文章
|
2月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
1月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
52 1
|
5天前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
6天前
|
数据采集 前端开发 JavaScript
Python爬虫之Ajax数据爬取基本原理#6
Ajax数据爬取原理【2月更文挑战第19天】
15 1
Python爬虫之Ajax数据爬取基本原理#6
|
26天前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
18 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
28天前
|
XML JSON 前端开发
|
28天前
|
前端开发 JavaScript
|
30天前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
24 0
|
1月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
14 0
|
1月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
14 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值

相关产品

  • 云迁移中心