在客户端读取后台的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. React中的高阶组件

    高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的 ...

  2. Java基础笔记(十四)——封装

    封装(好比ATM机) 将类的某些信息隐藏在类内部,不允许外部程序直接访问(隐藏对象的信息),通过该类提供的方法来实现对隐藏信息的操作和访问(留出访问的接口). 特点: 1.只能通过规定的方法访问数据. ...

  3. htmlunit最具有参考意义项目

    ### HtmlUnit What? - 项目1 https://gitee.com/dgwcode/spiderTmallTradeInfo - 项目2 https://gitee.com/dgwc ...

  4. Gradle 安装(Windows)

    一.Gradle 简介 1.1 什么是 Gradle?   Gradle 是一个基于 Apache Ant 和 Apache Maven 概念的 项目自动化构建开源工具.它使用一种基于Groovy的D ...

  5. context.xml

    <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apache Software Foundation (ASF ...

  6. 配置文件中取值: spring配置文件中util:properties和context:property-placeholder

    转载大神 https://blog.csdn.net/n447194252/article/details/77498916 util:properties和context:property-plac ...

  7. C# Task任务详解及其使用方式

    https://blog.csdn.net/younghaiqing/article/details/81455410 C#多线程编程笔记(4.3)-Task任务中实现取消选项 https://blo ...

  8. JS——操作元素属性

    属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...

  9. 转 安装EBS前期检查工具 - RDA - Health Check / Validation Engine Guide

    http://blog.itpub.net/35489/viewspace-1295028/ 参考文档        RDA - Health Check / Validation Engine Gu ...

  10. Flume NG部署

    本次配置单节点的Flume NG 1.下载flume安装包 下载地址:(http://flume.apache.org/download.html) apache-flume-1.6.0-bin.ta ...