在客户端读取后台的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. Nacos深入浅出(九)

    然而Nacos的发布操作并不是上面我们想的那样通过代理去实现,通过下面的代码我们分析下: public class NacosConfigurationPropertiesBindingPostPro ...

  2. HDU2050 折线分割平面

    题目:acm.hdu.edu.cn/showproblem.php?pid=2050 递推: 从直线入手,第n条直线,最多和平面上的直线有n-1个交点,多出(n-1)+1个部分 序号 1 2 3 .. ...

  3. 【aspnetcore】配置使用jwt验证

    因为害怕token泄露出现问题,所以从未在项目中使用jwt.但这玩意现在真的很火,趁有空还是研究了一下. 在aspnetcore中实现jwt很简单,感觉微软把很多工作都做了,虽然开发效率上去了,但是使 ...

  4. ubuntu网络已禁用解决办法

    1.首先停掉network-manager这个服务 sudo service network-manager stop 2.删除掉NetworkManager.state这个文件 sudo rm /v ...

  5. Vertical roller mill from SBM

    Vertical roller mill has many different forms, but it works basically the same. All of these forms o ...

  6. JAVA多线程面试题目

    1,java中有几种方法可以实现一个线程? 答:在Java中实现一个线程有两种方法,第一是实现Runnable接口实现它的run()方法,第二种是继承Thread类,覆盖它的run()方法.这两种方法 ...

  7. PIO导出

    1..HSSFWorkbook 声明一个工作簿,创建一个excel文件 //创建HSSFWork对象(excel的文档对象) HSSFWorkbook wb=new HSSFWorkbook(); / ...

  8. java中的中文变量和方法

    在网上看到java居然支持中文变量名.方法.这里我只试了变量名和方法,类名这些没有试....真是给力 package com.gxf.fun; public class TestForChinese ...

  9. Struts2笔记1

    一.简介 1.作用于web层:Struts2是一种基于MVC模式的轻量级Web框架; 2.各文件夹简介:     apps:该文件夹存用于存放官方提供的Struts2示例程序,这些程序可以作为学习者 ...

  10. extends 继承

    继承的作用:子类可以直接拥有父类成员:其中,私有成员和构造函数不参与继承: java中类继承的特点:只支持单一继承和多重继承,不支持多继承(一个类不能同时继承多个类) 继承中成员变量的特点:子类中可以 ...