關于 jQuery getJSON方法的一點心得

作者: Kevin Shi  來源: 博客園  發布時間: 2009-12-20 21:07  閱讀: 8055 次  推薦: 0   原文鏈接   [收藏]  

最近需要做一個純靜態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也是通過相同的效果做出來的。

0
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()