前置条件：

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. 【VictoriaMetrics】vm单机版和vm-storage的查询功能的对比

    1.vm-storage源码调用表 文件 行号 函数 说明 app/vmstorage/main.go 53 main 入口94行调用srv.RunVMSelect() app/vmstorage/t ...

  2. 611. Valid Triangle Number

    Given an array consists of non-negative integers, your task is to count the number of triplets chose ...

  3. golang中的并发安全和锁

    1. 并发安全 package main import ( "fmt" "sync" ) var ( sum int wg sync.WaitGroup ) f ...

  4. migrate 和makemigrations 命令

    在你改动了app下 models.py的内容之后执行下面的命令: Python manger.py makemigrations 相当于 在该app下建立 migrations目录,并记录下你所有的关 ...

  5. 将Java连接数据库操作封装到MySQL类中

    public class MySQL { final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver"; final String D ...

  6. python小兵 面向对象继承super和c3算法

    python多继承 在前面的学习过程中. 我们已经知道了Python中类与类之间可以有继承关系. 当出现了x是一种y的的时候. 就可以使⽤继承关系. 即"is-a" 关系. 在继承 ...

  7. ApacheCN Kali Linux 译文集 20211020 更新

    Kali Linux 秘籍 中文版 第一章 安装和启动Kali 第二章 定制 Kali Linux 第三章 高级测试环境 第四章 信息收集 第五章 漏洞评估 第六章 漏洞利用 第七章 权限提升 第八章 ...

  8. Java GUI界面补充总结（不定期补充）

    一.Java中如何设置各类组件透明 感谢原文:https://kslsi.iteye.com/blog/2096608 补充:Frame透明:AWTUtilities.setWindowOpacity ...

  9. samb建立共享文件夹，windows报无法访问没有访问权限

    一.首先确保你已经成功安装上了samba 二.在修改smb.conf文件之前,先拷贝一个备份,然后输入下面的命令修改smb.conf gedit /etc/samba/smb.conf将smb.con ...

  10. Linux Shell脚本攻略复习

    1. 打开终端后的提示符中,$表示普通用户,#表示管理员用户root,root是linux系统中权限最高的用户. 2. shell脚本通常是一个#!起始的文本文件,其中#!位于解释器路径之前. 例如: ...