AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-11-17 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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"
  }
]
文章标签：
前端开发
数据格式
JSON
关键词：
HTML数据
请求JSON
HTML请求
ajax数据
HTML拼接
祈澈菇凉
目录
相关文章
疯狂的猿
|
1月前
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果，非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
27 1
奔跑的数据
|
2月前
|
数据采集 JSON 数据处理
抓取和分析JSON数据：使用Python构建数据处理管道
在大数据时代，电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术，高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务，模拟真实用户行为，提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
奔跑的数据
58 1
抓取和分析JSON数据：使用Python构建数据处理管道
小王老师呀
|
1月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象（如字典、列表）转换为 JSON 字符串，主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化，以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象，使用 `json.loads` 方法。文中还提供了具体的代码示例，展示了如何处理不同类型的 Python 对象。
小王老师呀
26 1
1842782014377483
|
1月前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据：从编码到解码
在现代Web开发中，JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据，包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法，可以显著提升JSON处理的性能，确保系统快速稳定运行。
1842782014377483
55 3
技术交流18179014480
|
1月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品，该接口返回的通常是一个JSON格式的响应，其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例，同时提供对其关键字段的解释
技术交流18179014480
41 0
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
71 1
天玄TX
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
天玄TX
91 0
热烈的马
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
热烈的马
161 0
杨校
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校
51 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
乐多_L
|
4月前
|
XML JSON 前端开发
AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
乐多_L
35 0