解决ajax不能访问本地文件问题（利用js跨域原理）

博主自己在开发一个无后台，只有前台的查询系统时，遇到一个困难，如何利用Ajax读取自己的本地json文件，百度、谷歌了下，发现大部分文章都是在说修改浏览器参数，但是自己想想，用户在使用时，还要修改浏览器的参数，这样显然降低了用户体验。自己琢磨了一段时间，发现可以利用js跨域原理来解决这个瓶颈。将之前要读取的json文件，变为js对象文件，这样就可以读取这个文件，然后写一个函数来对这个js对象进行解析。

首先说明下js跨域原理和jsonp这个技术（如果说的不详细，可自行百度、谷歌）

src可以跨域请求，但是这个资源不能作为js解析，资源不是js，所以解析json的时候会出错

中间是一个对象，调用fun把这个对象传入进去，

定义的function fun可以看作是请求成功后回调函数

jsonp本质：是通过script标签跨域，来突破跨域限制请求；返回的数据中用一个函数来包装起来

jsonp是用来解决js跨域请求数据的问题，原理：是通过script标签可以跨域请求资源的原理间接的请求数据。

jsonp需要满足3个条件：

1、通过script的src请求资源

2、请求的资源中用回调函数的将数据进行包裹

3、调用方要定义回调函数

下面贴入demo来演示Ajax读取本地文件，ps：在没有服务器的情况下

下面是上面html页面打开效果图（为了说明成功读取本地文件）

贴入上面的test.html代码

<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script>
  function fun(data){ 

      //var dataj=JSON.parse(data.pro); //可以将json字符串转换成json对象
       alert(data.pro);
      var obj = eval(data.pro);
      //alert(obj.name);
      //$.each(obj,function(index,position){
        //alert(+position['name']);
            //html+="<option value='"+position['name']+"'>"+position["name"]+"</option>";
      //});
      for(var i=0;i<obj.length;i++){
         alert(obj[i].name);
      }
      alert(1); 

    }
</script>

/*下面的代码，是之前利用ajax来读取本地json文件的代码，是不能实现的，运行时，可以不贴入下面的代码*/
<script type="text/javascript" src="json/abc.json"></script>
<script>
  $(function(){
    alert($);
    /*$.ajax({
     type: "GET",
     url: "json/positionMenu.json",
     dataType: "json",
     success:function(data){
         alert(data);
      }
    });*/ 

  })
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • 纯JS实现AJAX局部刷新功能

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示: 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. //

  • ajax响应json字符串和json数组的实例(详解)

    ajax响应json字符串和json数组的实例(详解)

    最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场景,以及前台的处理示例. 直接看代码. json字符串的后台响应 package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv

  • 轻松理解JavaScript之AJAX

    摘要 AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术 一.什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 二.如何使用ajax? 第一步:创建xmlhttprequest对象 创建xmlhttprequest对象,XMLHttpRequest对象用来和服务器交换数据. var xmlhttp =new XMLHttpRequest(); 第二步:注册回调函数 onreadystatechange函数,当服务

  • 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

  • JavaScript中从setTimeout与setInterval到AJAX异步

    setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },100) setTimeout(function() { console.log(3); },50) console.log(4); 打印结果是 1.4.3.2,你可能觉得理所应当,那我们再看下下面这个例子 console.log(1); setTimeout(function() { console

  • AngularJS实现ajax请求的方法

    本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &

  • jquery拼接ajax 的json和字符串拼接的方法

    整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享. jQuery拼接字符串ajax <form id="myForm" action="#"> <input name="name"/> <input name="age"/> <input type="submit"/> </form> <s

  • 用ajax传递json到前台中文出现问号乱码问题的解决办法

    我使用的Springmvc,在controller层传输一个json到前台,后台显示没问题,中文正常显示而到了前台 中文就变成了问号. 后来发现,因为在controller中返回json用了@ResponseBody,而spring源码中@ResponseBody 的实现类发现其默认的编码是 iso-8859-1,而项目用的编码为utf-8,所以传中文会出现乱码. 这里我使用了注解来解决: @RequestMapping(value="/echarts.do", produces =

  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.

随机推荐