关于 Jquery getJSON方法的一点心得

最近需要做一个纯静态html的网站,所以数据交互ajax必不可少,于是选择Jquery,本地调试一切正常,但是,上了服务器之后就有问题了。

首先在FF上面出现这个错误:

Error: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "http://localhost:1234/JavaScript/JQurey/jquery-1.2.6.min.js Line: 28"]

IE下面呢倒是可以通过,但是会出现下面这个警告信息:

点完Yes之后是可以得到效果的。但是这样对于网站的客户来说,实在是很糟糕的体验。

于是google Access to restricted URI denied”,发现问题出在Cross-Domain上面,看了Jquery的开发资料得知,从1.2版本开始使用 jQuery.getJSON(url,[data],[callback]) 来进行跨域提交,参考如下:

As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback.

看了上面 JSONP的链接,几乎一无所获,按照其要求我加上了?callback=?",还是取不到任何数据,我的JS代码如下:


Code

但是始终得不到数据,断点设到data.name一行,从来没有被执行过。于是,开始考察jsoncallback=?,发现这个其实是有值的,只是自己一直没有handle(其实是因为自己不知道怎么样handlegoogle很久,几乎没有找到任何直接使用ashx来处理remote json的例子),但是搜到一篇元老级的文章,是一篇专门介绍jquery ajax的文章,上面说需要将jsoncallback的值传回来,原来如此,于是就将ashx的方法修改了一下,几经转折,终于调试出来下面的代码:


Code

其中,JsonObjectCollection 类要引用using System.Net.Json;JSON官方网站推荐的一个dll,我没有用JSON.Net,是因为我是2.0的,于是我使用这个,感觉也很不错。使用这个的好处是对于html代码的处理,因为json是通过“”传递数据的,但是html中也是含有“”的,如果直接手动拼写,会很麻烦。

这个ashx执行的结果如下:

jsonXXXXXXXXXXXXXX?

 

 

其中 jsonXXXXXXXXXXXXXX 就是context.Request.QueryString["jsoncallback"] 的值。

在页面当中的效果如下:

登陆之后的结果如下:

下面的那个cart也是通过相同的效果做出来的。



 下面是按照回复做出来的demo,我把System.Net.Json也放进去了。

 /Files/mygift/demo.zip

版权声明:本文原创发表于博客园,作者为Kevin Shi
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。

posted on   Kevin Shi  阅读(20053)  评论(13编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?

导航

< 2008年12月 >
30 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3
4 5 6 7 8 9 10
点击右上角即可分享
微信分享提示