JavaScript读取json文件

2023-11-14

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var requestUrl='ids.json';
			var request = new XMLHttpRequest();
			request.open('GET',requestUrl);
			request.responseType='text';
			request.send();
			request.onload=function(){
				var idsText=request.response;
				var ids=JSON.parse(idsText);
				console.log('输出数组元素:');
				ids.forEach(function(item,index){
					console.log(index+":"+item);
				})
			}
		};
		
	</script>
</html>

ids.json:

[
    "11",
    "22",
    "33",
	"44",
	"55"
]

//加上错误处理

try{
			window.onload=function(){
				var requestUrl='ids.json';
				var request = new XMLHttpRequest();
				request.open('GET',requestUrl);
				request.responseType='text';
				request.send();
				request.onload=function(){
					var idsText=request.response;
					var ids=JSON.parse(idsText);
					console.log('输出数组元素:');
					ids.forEach(function(item,index){
						console.log(index+":"+item);
					})
				}
			};
		}catch(e){
			
		}
		console.log('I can run here');

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript读取json文件 的相关文章

  • js原型和原型链你只要看这一篇

    一 原型概述 任何对象都有一个原型对象 这个原型对象由对象的内置属性 proto 指向它的构造函数的prototyoe指向的对象 即任何对象都是由一个构造函数创建的 被创建的对象都可以获得构造函数的prototype属性 注意 对象是没有p
  • CSS整体界面设计

  • web前端入门到实战:CSS遮罩效果、阴影效果、毛玻璃效果

    一般遮罩 background 000 在body标签的最后加上div标签作为遮罩 如下 div class mask div css样式 mask position fixed top 0 left 0 bottom 0 right 0
  • HTML期末学生大作业-使用HTML+CSS技术仿传智博客网站

    精彩专栏推荐 文末获取联系 作者简介 一个热爱把逻辑思维转变为代码的技术博主 作者主页 主页 获取更多优质源码 web前端期末大作业 毕设项目精品实战案例 1000套 程序员有趣的告白方式 HTML七夕情人节表白网页制作 110套 超炫酷的
  • 学习CSSGrid布局

    一 重要术语 CSS Grid 网格 布局 又称为 Grid 网格 是一个二维的基于网格的布局系统 它的目标是完全改变我们基于网格的用户界面的布局方式 FlexBox 一维布局 Grid 二维布局 Flexbox 和 Grid 能协同工作
  • 未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0"[已解决]

    前两天升级系统架构 升级后打开网页报错了 详细信息如下 未能加载文件或程序集 Newtonsoft Json Version 4 5 0 0 Culture neutral PublicKeyToken 30ad4fe6b2a6aeed 或
  • 前端性能优化

    页面的性能指标 DCL DOMContentLoaded DOM解析完毕 FP First Paint 表示渲染出第一个像素点 FP一般在HTML解析完成或者解析一部分时候触发 FCP First Contentful Paint 表示渲染
  • 2023年前端面试题集锦

    2023年又是行情惨淡的一年 为此我从 枇杷村IT面试宝典 小程序里收集了一些题目 更多题目可以扫下方二维码查看 现做个总结如下 1 在JavaScript中 0 0的结果是什么 结果为true 严格等于比较的是值和类型 对象除外 只要值和
  • Webpack配置Vue热更新

    Webpack配置Vue热更新 需要的包 cnpm i vue webpack webpack cli webpack dev server html webpack plugin clean webpack plugin style lo
  • CSS怎么将DIV中的a标签改颜色

    标签默认文字是蓝色 点过后是文字是紫色 想改变标签文字颜色设置方法如下 a color black 设置默认颜色 a link color blue 未访问颜色 a visited color gray 已访问颜色 a hover colo
  • 表单页面美化(html、css)

    表单页面美化 html css 效果图片 实现代码 html部分就是平常的输入框 div class mainfont h1 在线预约 h1 div div class form div
  • react组件中设置多个className

    错误写法
  • web前端面试题整理(前端和计算机相关知识)

    1 你能描述一下渐进增强和优雅降级之间的不同吗 定义 优雅降级 graceful degradation 一开始就构建站点的完整功能 然后针对浏览器测试和修复 渐进增强 progressive enhancement 一开始只构建站点的最少
  • input标签是什么?input标签属性有哪些

    input标签属于什么标签 input标签属性有哪些 相信刚接触的表单的小白应该很陌生 那么接下来我们就来讲一下input标签属性有哪些 首先小编在这里谢谢大家一直的支持 每天都会更新十个web前端基础内容 需要的可以关注我 另外也可以进我
  • web前端笔记:html5的标签

    在HTML4 01中 lt b gt lt i gt 是视觉要素 presentationl elements 分别表示无意义的加粗 无意义的斜体 表现样式为 font weight bolder 仅仅表示 这里应该用粗体显示 或者 这里应
  • react脚手架配置别名并自动提示[VSCode]

    1 安装三方库 craco craco yarn add craco dev npm install craco craco save dev 2 配置craco config js const path require path modu
  • windows下配置Mysql-5.7.9服务

    第一步 从官方网站下载 mysql 5 7 9 winx64 zip 第二步 解压缩 在根目录下复制my default ini 改名为my ini 第三步 初始化mysql目录 bin mysqld initialize user mys
  • js实现鼠标悬停显示title效果

  • 探索CSS:从入门到精通Web开发(二)

    前言 当我们谈论网页设计和开发时 CSS 层叠样式表 无疑是其中的重要一环 作为HTML的伴侣 CSS赋予网页以丰富的样式和布局 使得网站看起来更加吸引人并且具备更好的可读性 本书将通过一系列深入浅出的方式 带你从入门到精通CSS 探索We
  • 第8章 多媒体嵌入

    学习目标 了解视频 音频嵌入技术 能够总结HTML5视频 音频嵌入技术的优点 了解常用的视频文件格式和音频文件格式 能够归纳HTML5支持的视频和音频格式 掌握HTML5中视频的嵌入方法 能够在HTML5页面中添加视频文件 掌握HTML5中

随机推荐

  • linux系统编程-1、基础知识

    前言 Linux系统编程的基础系列文章 随着不断学习会将一些知识点进行更新 前期主要是简单了解和学习 文章目录 shell bash 命令和路经补齐 历史记录 目录和文件 类Unix系统目录结构 用户目录 ls cd which pwd m
  • 请用美丽欢呼-------Day38

    周末 双休 疯了两天 敲了寥寥的代码 却没少看了相关的文章 这电子书大行于世的年代 对工具的漠然简直就是对生命的亵渎 颠簸的公交车上算是告别了YY的惬意 这生活 感觉傻了点 可真够味 原本只是想写篇 html的发展历程 的 可XHTML 2
  • Java并发编程:并发容器之CopyOnWriteArrayList(转载)

    http www cnblogs com dolphin0520 p 3938914 html 原文链接 http ifeve com java copy on write Copy On Write简称COW 是一种用于程序设计中的优化策
  • 基于YOLOv8模型和CrowdHuman数据集的行人检测系统(PyTorch+Pyside6+YOLOv8模型)

    摘要 基于YOLOv8模型和CrowdHuman数据集的行人目标检测系统可用于日常生活中检测与定位行人 Human 利用深度学习算法可实现图片 视频 摄像头等方式的目标检测 另外本系统还支持图片 视频等格式的结果可视化与结果导出 本系统采用
  • python 利用表格批量修改文件夹(包括子文件夹)下所有文件名

    首先是获得需要修改文件的路径放入xlsx中 我一般直接在系统的搜索框中搜索 然后全选复制路径 偷个小懒 也可以再写个自动遍历所有文件获取地址 点击这个复制路径即可复制全部选中文件的路径 直接复制在表格第一列即可 便于读取 然后按照自己实际的
  • SQL调优的几个方法

    1 为什么调优 好处是什么 SQL语句在编写之后 对于数据量较少的表基本没有什么性能上的需求 但是如果考虑到性能方面的话 SQL语句优化就是必须的 2 如何调优 调有点方法有哪些 1 对查询进行优化 应尽量避免全表扫描 首先考虑在where
  • node 版本管理器 --- Volta

    鲸腾FE 来自恒生鲸腾网络 是一支专注于 web 前端的开发团队 并在 web 前端领域积累了多年疑难问题解决经验 崇尚高效 优质 成长 自由 快乐 前言 在我们的日常开发中经常会遇到这种情况 手上有好几个项目 每个项目的需求不同 然而不同
  • uniapp 原生安卓开发插件(module),以及android环境本地调试(一)

    uniapp 原生安卓开发插件 module 以及android环境本地调试 1 开发前景 由于uniapp 框架的局限先 有很多功能不能如原生android开发使用顺畅 因此 需要使用插件进行辅助 再由uniapp引入插件 使得功能完善
  • Linux设备驱动开发详解总结(二)之并发与竞争

    转载地址 http blog csdn net lwj103862095 article details 8548500 Linux设备驱动中必须解决一个问题是多个进程对共享资源的并发访问 并发的访问会导致竞态 在当今的Linux内核中 支
  • Netty:ByteBuf写入数据、读出数据

    介绍 Netty的ByteBuf数据位置索引是从0开始的 类似于数组 getByte int index 从指定位置读出一字节 这个操作不会改变ByteBuf的readerIndex或者 writerIndex 的位置 这个操作也不受rea
  • Ubuntu16.04系统安装tensorflow(GPU)

    作者 冯拓 电脑配置如下 配置 HP Z820 CPU核心线程数和主频 intel xeon 至强 E 5 2620 2 0GHz 24 内存 64GB 硬盘 2TB 显卡 NIVDIA TITAN X 12GB 安装过程中使用的安装包 安
  • 用Java实现杨辉三角

    给定一个非负整数 numRows 生成 杨辉三角 的前 numRows 行 在 杨辉三角 中 每个数是它左上方和右上方的数的和 示例 1 输入 numRows 5 输出 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 示例 2
  • Go语言的大小写

    初学者经常犯Go大小写默认的错误 即在包外引用小写的常量 函数提示错误 对于刚接触Go语言的人会觉得莫明其妙 原因是 Go语言中 常量 函数的首字母大写表示对外公开的相当于Java的public 小写表示私有的相当于Java的private
  • Vue element 二级菜单绑定示例

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 一 element ui 中动态绑定二级菜单示例 1 视图绑定
  • 软考高项之风险管理-攻坚记忆

    软考高项之风险管理 攻坚记忆 一 项目风险管理概述 1 风险相关概念及性质 2 风险分类 二 风险管理的ITO 1 风险管理过程组 规划风险管理ITO 2 风险管理过程组 识别风险ITO 3 风险管理过程组 实施定性风险分析ITO 4 风险
  • Three.js 模型添加标签

    在很多的实际的项目中 你可能需要给一个Three js的模型添加标签 那么我们可以使用three js的精灵模型来表示 使用精灵模型表示一个模型对象的标签 那么精灵模型就要位于模型对象的附近 可以获得要标注模型的世界坐标 然后来设置精灵标签
  • java cron表达式 每天凌晨两点_定时任务的cron表达式

    前言 对于开发人员来说 在做项目的过程中或多或少都会用到定时任务 Java开发一般会用Spring Quartz xxl job Elastic job来做定时任务调度框架 不论使用哪种框架 定时任务表达式都是必不可少的 平时配置cron表
  • linux的TCP连接数量最大不能超过65535个吗,那服务器是如何应对百万千万的并发的?

    首先 问题中描述的65535个连接指的是客户端连接数的限制 在tcp应用中 server事先在某个固定端口监听 client主动发起连接 经过三路握手后建立tcp连接 那么对单机 其最大并发tcp连接数是多少呢 如何标识一个TCP连接 在确
  • 动态规划(上)

    题目一 109 数字三角形 LintCode 分治 利用递归可以很快的写出程序 class Solution public int traverse vector
  • JavaScript读取json文件