js读取服务器json文件,原生js读取json文件

方法一

1.首先编写一个json文件：demo.json

[

{

"name":"张三",

"sex":"男",

"email":"zhangsan@123.com"

{

"name":"李四",

"sex":"男",

"email":"lisi@123.com"

{

"name":"王五",

"sex":"女",

"email":"wangwu@123.com"

}

]

2.js读取json文件

window.onload = function () {

var url = "demo.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/

var request = new XMLHttpRequest();

request.open("get", url);/*设置请求方法与路径*/

request.send(null);/*不发送数据到服务器*/

request.onload = function () {/*XHR对象获取到返回信息后执行*/

if (request.status == 200) {/*返回状态为200，即为数据获取成功*/

var json = JSON.parse(request.responseText);

for(var i=0;i

console.log(json[i].name);

}

console.log(json);

}

方法二

通过ajax获取json

var Ajax = function ()

{

$.getJSON ("demo.json", function (data)

{

$.each (data, function (i, item)

{

console.log(item.name);

});

}();

$.ajax({

url: "demo.json",//json文件位置，文件名

type: "GET",//请求方式为get

dataType: "json", //返回数据格式为json

success: function(data) {//请求成功完成后要执行的方法

//给info赋值给定义好的变量

var pageData=data;

for(var i=0;i

console.log(pageData[i].name);

}

})

方法三

工程化开发时(webpack/parcel)等，可以用import导入

import xx from 'xxx.json'

//文件后缀可省略，如

import xx from 'xxx'

————————————————

原文链接：https://blog.csdn.net/ClearLoveQ/article/details/90480207

js读取服务器json文件,原生js读取json文件相关推荐

js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
class 原生js获取父元素_原生js获取class
//使用原生js时,通过class名称就可以得到相应的class名称标签组封装的函数 //定义一个函数getClass(oParent,aClass); function getClass(oPare ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
js获取当前农历年月原生js实现公历转农历
原生js实现公历转农历(转载) 网上原生JS实现公历转农历的代码参差不齐,个人经过项目实践后发现有个博主的写的很好使用起来也很方便,于是一起分享给大家. 原博主的代码是在vue框架下写的,具体如下: ...
js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...

js读取服务器json文件,原生js读取json文件

js读取服务器json文件,原生js读取json文件相关推荐

最新文章

热门文章