Ajax读取Json文件进行数据渲染

最新推荐文章于 2024-07-20 16:47:57 发布
最新推荐文章于 2024-07-20 16:47:57 发布
阅读量1.2w 收藏 58
点赞数 10
分类专栏： 笔试 文章标签： Ajax JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superxiaolong123/article/details/81873882
版权
这篇博客记录了一次使用Ajax从data.json文件获取数据并进行页面渲染的实践过程。作者通过Ajax实现了异步获取数据，展示了如何处理数据删除功能，并在实现过程中遇到了跨域和JSON数据解析的问题，最终解决了这些问题。文章还提到了删除操作仅限于页面展示，不会影响原始JSON数据。
摘要由CSDN通过智能技术生成

前言

昨天偶然在自己电脑上翻到一家在长沙的小公司给的笔试题，有个题是关于前端的，当时主要应聘岗位是Java后端开发，所以当时对前端知识不熟悉，只会一点HTML+CSS+JS的基础知识。最近有学习Ajax+JS+Jquery的相关知识，再看这道题，考察的是挺简单的页面渲染，练练手还是不错的，在实现的过程中，还是遇到了很多问题，花了将近一天的时间。

题目要求

编写一个html文件，从data.json文件获取数据，实现如图所示的页面及功能。要求如下：

  1. 通过ajax异步获取数据，并显示到界面上
  2. 当点击Action列的删除图标时，将本行记录从界面上删除
  3. 可以使用流行的开发框架及插件，如jQuery、Bootstrap、VUE等
    这里写图片描述

实现过程

  1. 先准备好json数据

        {
    "test":[
        {"id":"1","dsn":"alibaba","pn":"payfor","email":"yang@qq.com"},
        {"id":"2","dsn":"tengxun","pn":"QQ","email":"longdaye@qq.com"},
        {"id":"3","dsn":"google","pn":"sq","email":"l23@qq.com"}
        ]
    }

  2. 下载Action项中删除按钮的图标
    可以去阿里巴巴矢量图中寻找自己喜欢并且合适的图案样式，应有尽有。
    http://www.iconfont.cn/

  3. 按照题目要求的界面编写HTML

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
最低0.47元/天 解锁文章
Super-小龙
关注
  • 10
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【看板】ajax动态获取后台传来json数据，加载到页面表格中
德仔
09-05 1442
近期需要在汽车产品车间开发几个看板，其中一个看板需要动态加载表格。通过ajax动态获取webapi传过来的json数据，加载表格。
从JSON文件中取数据
PXM706120的博客
12-27 1374
   在做订餐大师的时候，页面上显示的数据，会存到一个JSON文件里，那么如何从JSON文件里面取数据呢；     首先，可以从JSON文件里面直接取出数据，如下：      当JSON文件里面存放的数据为： {"person":["赵大", "钱二", "张三", "李四", "王五", "刘六"] }      需要注意的是，json文件中的数据必须是一
前端ajax怎么渲染数据,ajax请求解析json数据渲染在前端界面
weixin_36304957的博客
08-05 1006
记录一个简单的demo,关于ajax请求解析json数据渲染在前端界面的~共计在线离线$.ajax({url: "data.json",type: "GET",dataType: "json",success: function(data) {console.log(JSON.stringify(data))// 显示在线离线人数$("#total").html(data.total);$("#o...
JSON与AJAX：网页交互的利器
最新发布
2301_79420857的博客
07-20 326
在这个示例中，当用户点击“获取数据”按钮时，JavaScript会发送一个GET请求到服务器上的data.json文件。服务器返回JSON格式的响应后，JavaScript使用JSON.parse()方法将JSON字符串解析为JavaScript对象，并遍历对象数组来构建HTML字符串。通过掌握JSON和AJAX的原理和应用方法，我们可以开发出更加优秀和用户体验更好的Web应用。JSON是一种轻量级的数据交换格式，它基于ECMAScript的一个子集，采用完全独立于语言的文本格式来存储和表示数据。
获取JSON数据
jingde528的博客
10-23 6892
获取JSON数据
ajax json 渲染 html,AJAX接收JSON数据，调用template模板循环渲染页面的小白新手方法...
weixin_34553861的博客
06-29 479
请求回来的数据为JSON，有两种方式实现：第一种：在后台接口规定吐出JSON数据：写header，将键值对数组进行json编码；第二种：后台接口吐出JSON格式的字符串，接收端定义数据格式dataType。第一种：在后台接口规定吐出JSON数据需求1 后台接口吐出JSON数据后台php接口中，需要写三个部分：1.1 开头header规定数据格式；header("content-type:appli...
JSON 获取数据
南淮北安的博客
04-07 1678
文章目录一、获取数据的方式二、遍历 一、获取数据的方式 （1）json对象.键名 （2）json对象["键名"],这里需要加引号 （3）数组对象[索引] <script> // var perosn = {name: "张三", age: 16, gender: true}; // var name = perosn["name"]; ...
Ajax在线抓取json数据并渲染到自己的界面
qq_40029828的博客
04-19 424
获取在线网站数据 基本所有网站都使用Ajax，在F12的Network选项中，选择XHR，找到json数据后，百度一个在线转化json格式，后复制进自己的json文档中即可 php读取json后返回index页面 index文档： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
jq ajax 读取本地文件,jquery读取本地文件
weixin_39926394的博客
08-06 1760
$(document).ready(function(){$("#b01").click(function(){htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});var temp=htmlobj.responseText; alert(temp);$("#myDiv").html(htmlobj.responseText); });})...
Layui调用json获取表格动态数据代码.zip
09-27
Layui是一个轻量级的前端框架，专为开发者和设计师打造，用于构建现代Web应用。...通过研究这些代码，你可以深入了解Layui框架如何与后端API交互，以及如何利用JSON数据动态渲染表格，提升你的前端开发技能。
JS获取json文件内容并处理参考
09-14
利用jquery的post功能获取json的内容并作后续处理， 本例子需要在web环境下跑 本例子需要在web环境下跑 本例子需要在web环境下跑
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
11-20
本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作。分享给大家供大家参考，具体如下： 1、先给json格式的数据： [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id":4,"name":"mary"}, {"id":5,"name":"jerry"}, {"id":6,"name":"tom"} ] 2、通过访问html页面，获取并展示数据： 方法一： <!DOCTYPE html> <html> <head> <title></titl
Ajax获取JSON数据
taobao2024api的博客
07-13 377
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，通过 Ajax 我们可以异步在服务器与客户端之间传递数据。在 Ajax 中，普遍使用 JSON 作为传输数据的格式。一般情况下，我们可以通过 JavaScript 来发送 Ajax 请求，并接收响应的信息。下面通过一个示例来演示一下（有关 Ajax 的详细介绍大家可以查阅《
jquery ajax 接受JSON响应
weixin_36885197的博客
07-14 27
如何使用jQuery Ajax接受JSON响应 1. 了解整体流程 在使用jQuery Ajax接受JSON响应之前，首先需要了解整个流程。下面是一些基本的步骤： 步骤 描述 1 发起Ajax请求 2 服务器处理请求并返回JSON响应 3 客户端接受并处理JSON响应 2. 详细步骤及示例代码 ...
JSON文件的数据的读取
Bluecook的博客
01-29 1652
JSON文件的数据读取
js的ajax怎么接受json数据,js访问ajax获取的json数据
weixin_34991792的博客
08-05 689
您好，由于$.ajax函数的async属性默认为true，即异步请求，并且您声明的jsonData是局部变量，所以jsonData输出结果为undefined。如果您想外部访问到ajax响应值，有两种方法：方法一：指定一个回调函数，示例如下：$.ajax({type: "get",dataType: "json",url: 'skin/data/winner.json',success: call...
两种方式读取Json文件 数据
weixin_44906202的博客
02-01 2556
读取json数据
盘点Python中4种读取JSON文件和提取JSON文件内容的方法
热门推荐
这家伙很懒，什么都没有留下
03-13 1万+
本文介绍了Python中四种读取和提取JSON文件内容的方法，分别是使用json模块的load()和loads()方法、使用pandas库的read_json()方法，以及使用requests库从网络API获取JSON数据。每种方法都有其适用的场景和优势，根据实际需求选择合适的方法可以提高数据处理的效率和准确性。对于处理单个JSON文件，如果文件较小且结构简单，可以直接使用json模块的load()方法读取并解析。如果JSON数据已经以字符串形式存在，可以使用loads()方法进行解析。
在HTML文件中读取JSON文件并渲染图表pyecharts2.0.3
06-11
在 HTML 文件中读取 JSON 文件并渲染图表，需要使用 Pyecharts 的 `load` 方法和 `setOption` 方法。具体操作步骤如下： 1. 创建 HTML 文件，并在文件中引入 echarts.min.js 和 pyecharts.min.js： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>柱状图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/pyecharts/1.9.0/pyecharts.min.js"></script> </head> <body> <div id="chart" style="width: 800px;height:600px;"></div> <script> // 在这里读取JSON文件并渲染图表 </script> </body> </html> ``` 2. 在 `script` 标签中使用 `load` 方法读取 JSON 文件： ```html <script> // 使用load方法读取JSON文件 var chartData = {}; pyecharts.load('chart.json', function (data) { chartData = data; }); </script> ``` 3. 在 `script` 标签中使用 `setOption` 方法渲染图表： ```html <script> var chartData = {}; pyecharts.load('chart.json', function (data) { chartData = data; var myChart = echarts.init(document.getElementById('chart')); myChart.setOption(chartData); }); </script> ``` 4. 将以上代码保存为 HTML 文件，打开 HTML 文件即可看到渲染出来的图表。 注意：以上代码中的 `chart.json` 文件应该在 HTML 文件的同一目录下，或者使用相对路径指定文件路径。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值