前置条件：

1. 编辑器，我用的是HbuilderX，解压即食，非常美味，点击传送门。

2. jQuery.min.js，点击传送门。

简单的项目目录：

a. test.html内容

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="showData"></div>

        <script type="text/javascript">

            $(function() {

                $.ajax({

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

                    url: "test.json", //文件地址

                    success: function(data) { //成功返回

                        var str = JSON.stringify(data);

                        $(".showData").text(str);　　//将数据写在页面，方便观看（转为了文本格式）

                        console.log(data);　　//也可以在控制台看数据

                    },

                    error: function(e) { //失败返回

                        console.log(e.statusText);

                    }

                });

            });

        </script>

    </body>

</html>

b. test.json

[

    {

        "name" : "aaa",

        "age" : "16"

    },

    {

        "name" : "bbb",

        "age" : "15"

    }

]

c. 文件准备就绪后，点击执行即可【如若本地直接双击test.html文件，则会有跨域报错。需要从编辑器（如：HbuilderX）打开。】

 

至此，ajax读取本地数据成功。（后续将会探究如何将数据写入本地文件，以及本地数据的增删改查。）

【赠人以赞，手有余香！嘿嘿...】

ajax读本地文件的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  3. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  4. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  5. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  6. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  7. Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库

    Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...

  8. Ajax实现xml文件数据插入数据库（二）--- ajax实现与jsp的数据交互。

    在上一篇文章中我们成功得到了重新组织后的数据,接下来需要做的便是将数据插入到数据库中了.在与数据库打交道的过程中有一些方法是普遍的,我们将这些通用方法封装到一个DbUtil类中,以便复用,封装好的Db ...

  9. 移动端通过ajax上传图片（文件）并在前台展示——通过H5的FormData对象

    前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法.发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的f ...

随机推荐

  1. F2BPM的流程仿真

    仿真概述 F2BPM工作流仿真是一种通过建立工作流虚拟运行环境执行工作流仿真的方法.集中式仿真引擎解释工作流仿真模型,仿真活动的执行,处理仿真过程中的不确定性,从而完成工作流模型的仿真.同时,会实时显 ...

  2. 学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象

    一.定义类:使用的是funciton,因为在js中没有定义类的class语句,只有function. ■ 举例: //定义一个Person类(通过类的无参构造函数定义类) function Perso ...

  3. JDK原子操作类

    在Atomic包里一共提供了13个类,属于4种类型的原子更新方式,分别是原子更新基本类型.原子更新数组.原子更新引用和原子更新属性(字段).Atomic包里的类基本都是使用Unsafe实现的包装类. ...

  4. 关于启动bash提示‘bash: export: `//这是新的': not a valid identifier’的解决办法

    学习linux以来将centos改的也不少了,也不知道这个问题是由于那个修改来的.最近改bash的操作环境配置文件,用到了~/.bashrc这个文件,发现里面被我修改过. 那是当年安装fcitx输入法 ...

  5. linux面试题（重点）

    1.No space left on device ,但df -h,磁盘空间还很富余?原因是 Inode 耗尽.可以使用df -i检查.磁盘中中产生了很多小的临时文件,造成在磁盘空间耗尽之前文件系统的 ...

  6. Ubuntu SVN 搭建

    SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subversion ...

  7. JS基础语法（二）

    目录 JavaScript基础语法(二) 八. 函数 1. 函数的概念 2. 函数的使用 声明函数 调用函数 3. 函数的封装 4. 函数的参数 函数的参数匹配问题 5. 函数返回值 6. argum ...

  8. 使用Termux并与ubuntu建立ssh连接

    什么是Termux? Termux是一个Android终端仿真器和Linux环境应用程序,直接工作,无需根目录或设置.一个最小的基本系统被自动安装-额外的软件包可以使用APT软件包管理器来使用.不需要 ...

  9. Linux空洞权限有问题处理

  10. 业务驱动的全景监控体系在阿里的应用 | 阿里巴巴DevOps实践指南

    编者按:本文源自阿里云云效团队出品的<阿里巴巴DevOps实践指南>,扫描上方二维码或前往:https://developer.aliyun.com/topic/devops,下载完整版电 ...