`
yangyou230
  • 浏览: 1649422 次
文章分类
社区版块
存档分类

jquery ajax 访问本地地址问题

 
阅读更多

问题:

前端制作静态页面,使用ajax读取数据,前台显示,但是在chrome下显示不出来。

目录结构:

其中, chartdata.html为请求访问的页面,构造数据格式为json。(该示例已上传至我的资源)

查找原因:

打开Chrome,通过JavaScript调试工具,显示问题如下:

XMLHttpRequest cannot load file:///D:/DangDangUED/DDCommon/general/Chart/jQChart/chartdata.html. Origin null is not allowed by Access-Control-Allow-Origin.

断点调试,说是eval(data)[0]无法读取。

但是在IE以及firefox都没有问题。是由于Chrome对ajax的解析不同造成的吗?查阅jquery文档,使用$.get()的方式,还是同样的问题。

原来在开发的时候从来未遇到这种问题。

解决:

Google一把,在Stackoverflow上找到该问题的解答:

http://stackoverflow.com/questions/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-access-allow-for-file

原来,ajax会对请求进行分析,比方说如果只是静态页面请求,那么地址均为 file://// ,相应的采取本地策略。对于chrome,则是出现XMLHTTPRequest 无法访问的问题。

当把页面放置于服务器上,地址均为 http:// ,搞定!

PS:chrome的上网设置使用的是IE的网络设置,如果你使用了代理上网,记得在本地调试的时候,勾选“跳过本地地址的代理服务器”。

分享到:
评论

相关推荐

    通过jquery的ajax请求本地的json文件方法

    今天小编就为大家分享一篇通过jquery的ajax请求本地的json文件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    IE8 jquery ajax获取静态资源报错TypeError 拒绝访问

    NULL 博文链接:https://hw1287789687.iteye.com/blog/2228888

    jQuery $.get 的妙用 访问本地文本文件

    场景: 当页面文件.html作为本地文件打开(即IE路径为file:///开头的)的时候,需要访问本地文本文件的内容时。 本地文件目录在页面文件的子文件夹。 目录结构 |-test.html |-Scripts |-data.txt 需要访问data.txt的...

    jquery解决客户端跨域访问问题

    客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解。由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算是解决了跨域问题...

    JSONP跨域GET请求解决Ajax跨域访问问题

    实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址。难道...

    演示如何实现jquery的回调函数

    通过jquery,通过ajax技术访问 server.asp,然后在用回调函数实现本地javascript的调用。这样可以实现通过服务器端控制客户端的html元素。 <!--html客户端代码,演示如何调用jquery的回调函数-->

    用jQuery的AJax实现异步访问、异步加载

    本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 【异步访问】 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端,并将结果返回给...

    jQuery跨域问题解决方案

    通过XMLHTTPRquest请求不同域上的数据,原来js跨域访问是后台有个处理路径“/test”的函数。下面给大家介绍jQuery跨域问题解决方案,有需要的小伙伴可以参考下

    Ajax-with-Django:带有Jquery Ajax的Employee Office示例

    Django的Ajax 带有Jquery Ajax的Employee Office示例 :backhand_index_pointing...index_pointing_right: 添加一些数据 :backhand_index_pointing_right: 运行项目 :backhand_index_pointing_right: 访问本地主机:8000

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介  1.1 通用访问 ...

    s2_ajax-jquery:使用 Ajax 和 Jquery 构建 REST Web 应用程序

    s2_ajax-jquery 使用 Ajax 和 Jquery 创建 REST Web 应用程序。 访问应用程序:本地主机/客户端 访问 api: localhost / api

    浅析JSONP解决Ajax跨域访问问题的思路详解

    实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址。难道...

    BudgetVis:一种可视化预算的工具。 用JavaScript与JQuery和Ajax编写。 用D3.js绘制

    预算流 可视化预算的工具。 构造Sankey流程图。...访问:本地主机:5000 发展历程 依存关系: 烧瓶 D3.js jQuery查询 作者 诺亚·提格纳(Noah Tigner) 参考:Jarret Meyer的D3.js代码,用于高

    基于Nodejs+Express+MongoDB+jQuery+Bootstrap搭建的电影网站

    使用jQuery和Bootsrap完成网站前端JS脚本和样式处理; 前后端的数据请求交互通过Ajax完成; 引入了Moment.js格式化前端页面显示时间; 2、项目后端搭建: 使用NodeJs的express框架完成电影网站后端搭建; 使用mongodb...

    《jQuery Mobile快速入门》.((美)Brad Broulik ).[PDF]

    作为jquery mobile的入门级读物,《jquery mobile快速入门》以示例方式讲解了jquery mobile的基本知识和核心特性,内容系统全面,便于理解。 《jquery mobile快速入门》总共分为10章,内容包括jquery mobile的基础...

    js服务器时间转本地时间

    该资源适用于不同时区的用户访问网站时,通过jquery插件将服务器时间转为用户本地时间。 演示:http://www.westyu.com/tools/local_time.php 只适合当网页加载完后进行时间的转换,如果需要ajax返回数据时间进行转换...

    jquery-response-validator:用于验证 ajax html 响应的 jQuery 插件。 它是 JavaScript、jQuery 和 w3c-validator 的醉酒混合体

    用于验证 ajax html 响应的 jQuery 插件。 它是 JavaScript、jQuery 和 w3c-validator 的混合体。 该项目的 MIT、Apache 或 LGPL 许可证附件即将发布。 我只是还没有决定哪一个。 按原样使用它的一个要求是将它...

    InputAssociate:JqueryMobile输入联想控件

    InputAssociate JqueryMobile输入联想控件 ...2 控件依赖于storejs,storejs提供了封装好的访问本地存储的实现--LocalStrorage 3 控件显示的数据是虚拟数据,这一部分要求使用ajax自行实现,控件不打算加入

    基于ssm酒店管理系统

    JSP +Spring + SpringMVC + MyBatis + html+ css + JavaScript + JQuery + Ajax + layui等等 3、项目访问 前台访问地址:http://localhost:8080/index.html 用户名:zhangsan 密码: 123456 后台访问地址:...

Global site tag (gtag.js) - Google Analytics