在客户端读取后台的json文件,使用jquery的$.getJSON,读取后台文件内容。

jQuery中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据,它使用的是GET HTTP请求。使用方法如下:

$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

url是必选参数,表示json数据的地址;
data是可选参数,用于请求数据时发送数据参数;
success是可参数,这是一个回调函数,用于处理请求到的数据。

$(function(){
$("#btn").click(function(){
$.getJSON("userinfo.json",function(data){
var $jsontip = $("#jsonTip");
var strHtml = "123";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data,function(infoIndex,info){ //$.each()遍历,infoIndex,info index - 选择器的 index 位置  element - 当前的元素(也可使用 "this" 选择器)

})
$jsontip.html(strHtml);//显示处理后的数据
})
})
})
</script>

但是在本地运行时出现错误啦

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

这个错误是浏览器不允许js打开本地文件,这很容易理解嘛,处于安全考虑啦。因为没开服务器,只是简单的打开网页,因此会出错。

json文件的读取的更多相关文章

  1. Python中yaml和json文件的读取和应用

    Python对yaml和json文件的读取: yaml文件读取: 首先创建一个yaml文件test.yaml import yaml   #引入包 f=open(path)  #建立Python的文件 ...

  2. json 文件打读取

    1.获取文件路径 /* * BookController.class.getClassLoader().getResource("static/json/book_nav.json" ...

  3. jquery无法读取json文件问题

    jquery无法读取json文件,如:user.json文件无法读取.把user.json文件的后缀名修改为aspx,文件内容不变,则可以读取~ 原理不懂!~~

  4. 曹工说Spring Boot源码(4)-- 我是怎么自定义ApplicationContext,从json文件读取bean definition的?

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码系列开讲了(1)-- Bean Definition到底是什么,附spring思维导图分享 工程代码地址 思维导图地址 工程结构图: 大 ...

  5. Java读取本地json文件

    背景 之前一直在弄一个Java爬虫,将爬取的信息保存到了数据库中.但这毕竟是一个课程设计,在设计前端GUI,展示数据的时候最开始是直接通过select语句从数据库中查找的,但我担心交给老师后,老师还要 ...

  6. 一些常用的文本文件格式(TXT,JSON,CSV)以及如何从这些文件中读取和写入数据

    TXT文件: txt是微软在操作系统上附带的一种文本格式,文件以.txt为后缀. 从txt文件中读取数据: with open ('xxx.txt') as file: data=file.readl ...

  7. [转]nodejs中package.json和package-lock.json文件的功能分析

    本文转自:https://blog.csdn.net/u013992330/article/details/81110018 最新版nodejs中,多了一个package-lock.json文件,刚开 ...

  8. json文件解析

    场景 读取json文件,读取子域名扫描结果 实现 >>> import json >>> with open("C:\\Users\\Windows32\ ...

  9. 【c++基础】从json文件提取数据

    前言 标注数据导出文件是json格式的,也就是python的dict格式,需要读取标注结果,可以使用c++或者python,本文使用c++实现的. JsonCpp简介 JsonCpp是一种轻量级的数据 ...

随机推荐

  1. 源代码实现一个binary例子

    一.源代码实现一个binary例子 1.例子描述 (1) 数据描述 输入数据X是二进制的一串序列, 在t时刻,有50%的概率是1,50%的概率是0,比如:X=[1,1,0,0,1,0.....]输出数 ...

  2. 什么时候要重写equals

    什么时候要重写equals 当对象需要根据值去比较它们是否相等时,需要我们重写equals,而它的hashCode也同时需要被重要,一般来说就是对类里所有成员变更求hashCode. 没有重写equa ...

  3. Educational Codeforces Round 48 (Rated for Div. 2) D 1016D Vasya And The Matrix (构造)

    D. Vasya And The Matrix time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  4. ch8 -- directMethod

    稀疏直接法 主要用的g2o的方法.自己定义了一个新的一元边.边的误差项是测量值和由估计得来的x,y对应的灰度值之间的误差.导数为灰度对像素坐标的导数乘以像素坐标对yi*李代数的导数的负数.灰度对于像素 ...

  5. Ext3.1的一些使用讨论

    这里简单记录一下曾经的10个月使用Ext的工作模式. 前公司用的是 Ext 3.1,在2018/2019的今天,可以说是比较久远的技术了.处于大前端发展时代的我们,对其的诟病应该不少. 不过其中面向对 ...

  6. Python 2.x和3.x不同点

    1.print和print() 2.yield 出现下面的错误Traceback (most recent call last): File “<pyshell#32>”, line 1, ...

  7. Kettle-Data Integration 简介

    Pentaho系列产品介绍   Pentaho公司下面有一堆关于数据处理(数据整合.数据挖掘.报表等)的开源项目即社区版,入口网站: http://community.pentaho.com/ 数据整 ...

  8. i++ ++i i=i+1 和i+=1

    这几个运算符的差别总是过一段时间就爱搞混,每次需要百度,还是自己记录一下方便查阅. int i=0; System.out.println(i++); 输出:0 int i=0; System.out ...

  9. Photoshop之切图

    基本(繁琐)操作: 切JPG图(即带背景的图): 1.         选切片工具(另外,切片选择工具能选择切片和删除切片),切 2.         存储为Web所用格式(快捷键Ctrl + Shi ...

  10. 使用vuex管理数据

    src/vuex/store.js 组件里面使用引入store.js,注意路径 import store from 'store.js' 然后在使用的组件内data(){}同级放入store 三大常用 ...