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文件 的相关文章

  • [Vue warn]: Cannot find element: #app

    解决方案 js在html页面头部引入的原因 自定义js文件要最后引入 因为要先有元素id vue才能获取相应的元素
  • web前端入门到实战:CSS遮罩效果、阴影效果、毛玻璃效果

    一般遮罩 background 000 在body标签的最后加上div标签作为遮罩 如下 div class mask div css样式 mask position fixed top 0 left 0 bottom 0 right 0
  • JavaScript函数七重关之函数定义

    JavaScript函数七重关的第一关是函数定义 函数定义需要用到function关键字 function myFunction 函数体 document write hello javascrept br 这是函数定义的第一种方法 也可以
  • SQL注入种类

    SQL注入攻击的种类 知彼知己 方可取胜 首先要清楚SQL注入攻击有哪些种类 工具 原料 云盾 方法 步骤 1 1 没有正确过滤转义字符 在用户的输入没有为转义字符过滤时 就会发生这种形式的注入式攻击 它会被传递给一个SQL语句 这样就会导
  • webpack打包报错:if (!scriptUrl) throw new Error(“Automatic publicPath is not supported in this browser“)

    翻车现场 ERROR in Error D Work test webpack demo 05 打包图片资源 src index html 104 if scriptUrl throw new Error Automatic publicP
  • 2020web前端面试整理

    背景 2020年是比较特殊的一年 由于新冠影响导致很多事情发生了变化 同时也改变了人们的一些常规习惯 就拿换工作来说 为了减少大家的出行和接触 线上视频 电话面试成了趋势 但是万变不离其宗 技术才是王道 下面是个人近期的一些面试经验和需要大
  • React-Router实战:NavLink

    基础 1 引入使用 import NavLink from react router dom
  • web基础学习(十)CSS3之 @keyframes 、animation

    css3新增属性 keyframes 关键帧 可以帮助开发者不必依赖JavaScript 只使用css代码完成动画制作 那么如何使用 keyframes呢 这里有两个重要知识点 1 keyframes 定义关键帧 语法 keyframes
  • 理解React的虚拟DOM

    一 背景 React是一个用于构建用户界面的JavaScript库 区别于老的前端开发技术 其最核心的就是引入了虚拟DOM的技术 为了对React有一个比较全面和深入的了解 所以把最近学习React虚拟DOM的知识 做个笔记 仅供学习 二
  • 基础15:npm、yarn、pnpm

    npm2 用 node 版本管理工具把 node 版本降到 4 那 npm 版本就是 2 x 了 执行 npm init npm install express 可以看到node modules目录如下 可以看到 npm2的node mod
  • 前端js和jq中select下拉框

    获取select选中的option的值 ddlRegType find option selected val 获取select选中的text ddlRegType find option selected text 获取select选中的
  • web前端笔记:html5的标签

    在HTML4 01中 lt b gt lt i gt 是视觉要素 presentationl elements 分别表示无意义的加粗 无意义的斜体 表现样式为 font weight bolder 仅仅表示 这里应该用粗体显示 或者 这里应
  • 关于2018网易游戏web前端实习生面试经历

    去年报名的网易前端面试 没想到过了3个月居然收到了面试的通知 心里也是激动 花了一天时间面试 自己总结一下面试过的问题 问题可能不全 但是这些是我所能记起来的问题 一面 1 css高度坍塌 两个盒子 一个下边据20px 一个上边据50px
  • react脚手架配置别名并自动提示[VSCode]

    1 安装三方库 craco craco yarn add craco dev npm install craco craco save dev 2 配置craco config js const path require path modu
  • CSS 学习笔记(基础)

    用来控制网页表现的语言 CSS Cascading Style Sheet 层叠样式表 然后我们继续看看 W3C 标准 结构 HTML 表现 CSS 行为 JavaScript CSS导入方式 选择器 属性 由于网页的框架结构是由HTML实
  • laravel路由

    路由 在laravel中 定义路由的地方在routes web php文件中 在使用laravel前必须先定义路由 然后才能在浏览器中访问 routes文件夹中还有一个api php 用于定义api路径 最简单的路由 Route get f
  • 网页是如何显示在浏览器

    这两天学习了一些网页如何在浏览器中显示的知识 感觉在我向前端走的路上非常有用 所以就在这里总结一下 大家可以看看 我也算是巩固一下知识 因为自己学识太浅 内容可能有一些错误之处 希望看到的朋友可以指出来啦 在Edge浏览器也加入Chromi
  • JavaScript string中includes、startsWith和endsWith的使用

    文章目录 前言 一 includes 二 startsWith 三 endsWith 总结 前言 JavaScript string的这三个方法都是根据参数返回true或false 一 includes includes 方法判断一个字符串
  • js实现鼠标悬停显示title效果

  • React 笔记 jsx

    严格约定 React 组件必须以 大写字母开头 而 HTML 标签则必须是小写字母 React JSX JSX 是由 React 推广的 JavaScript 语法扩展 用于表达组件的 特殊语法的 js 函数 要求标签必须闭合 返回的组件必

随机推荐

  • 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文件