前置条件：

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. 小程序onShareAppMessage有点迷

    小程序遇到的问题 起因 目前项目需求是分享时携带参数去进行裂变,但是在查看微信文档后发现有onShareAppMessage这个页面处理事件可以使用.事件可以使用return一个Object,用于自定 ...

  2. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  3. golang汇总gomodules的初始化与改变模块的依赖关系

    1. gomodules的初始化 2. 改变模块的依赖关系

  4. linux虚拟机快照

    目录 一:虚拟机快照 一:虚拟机快照 1.什么是快照? 快照可保存虚拟机在特定时刻的状态和数据. 状态包括虚拟机的电源状态(列如,打开电源,关闭电源,挂起). 数据包括组成虚拟机的所有文件,这包括磁盘 ...

  5. Java应用程序OOM分析

    内存泄露:申请使用完的内存没有释放,导致虚拟机不能再次使用该内存,此时这段内存就泄露了,因为申请者不用了,而又不能被虚拟机分配给别人用. 内存溢出:申请的内存超出了JVM能提供的内存大小,此时称之为溢 ...

  6. python04day

    回顾 int str bool str: s1='tangdaren123' 索引: s1[0] s1[-1] s1[:3] s1[:5:2] s1[-1:-4:-1] s1[-1:-6:-2] 常用 ...

  7. Windows mysql免安装版配置。（版本号-5.6.45）;

    Windows mysql免安装版配置.(版本号-5.6.45); 来自对 https://blog.csdn.net/weixin_42831477/article/details/81325691 ...

  8. 计算机网络-5-9-TCP拥塞控制

    TCP拥塞控制 拥塞控制的一般原理 在计算机网络中的链路容量(带宽),交换节点中的缓存和处理机等,都是网络的资源,在某段时间,若对网络中某一资源的需求超过该资源所能提供的可用部分,网络性能就会变坏,这 ...

  9. ApacheCN 数据科学译文集 20211109 更新ApacheCN 数据科学译文集 20211109 更新

    计算与推断思维 一.数据科学 二.因果和实验 三.Python 编程 四.数据类型 五.表格 六.可视化 七.函数和表格 八.随机性 九.经验分布 十.假设检验 十一.估计 十二.为什么均值重要 十三 ...

  10. 布客·ApacheCN 翻译校对活动进度公告 2020.5

    注意 请贡献者查看参与方式,然后直接在 ISSUE 中认领. 翻译/校对三个文档就可以申请当负责人,我们会把你拉进合伙人群.翻译/校对五个文档的贡献者,可以申请实习证明. 请私聊片刻(52981514 ...