ajax请求模拟json数据并且拼接到html

简介: ajax请求模拟json数据并且拼接到html
<!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>
    </style>
  </head>
  <body>
    <div class="potarea">
    </div>
  </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",
        dataType: "json", //返回数据格式为json
        success: function(data) {
          alert(JSON.stringify(data));
          var html = "";
          $.each(data, function(i, item) {
            html += ' <div class="pointarea">';
            html += ' <span>' + item.alarmtype + '</span>';
            html += ' <span class="editpoint">修改</span>';
            html += ' <span class="editdelete">删除</span></div>';
          });
          $(".potarea").append(html);
        }
      })
    })
  </script>
</html>

data.json

[
  {
    "alarmtype": "厂区南门"
  }, {
    "alarmtype": "巡更点一"
  }, {
    "alarmtype": "巡更点二"
  }, {
    "alarmtype": "巡更点1"
  }
]
相关文章
|
3月前
|
XML 前端开发 JavaScript
|
5月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
60 1
|
2月前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
48 0
|
4月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
85 22
|
4月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
54 18
|
4月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
121 4
|
4月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
184 1
|
4月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
248 2
|
5月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
79 10
|
5月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
45 7
React技术栈-react使用的Ajax请求库用户搜索案例

热门文章

最新文章