本文實例講述了jQuery使用JSONP實現跨域獲取數據的三種方法。分享給大家供大家參考,具體如下:
第一種方法是在ajax函數中設置dataType為'jsonp'
$.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //處理data數據 }});
第二種方法是利用getJSON來實現,只要在地址中加上callback=?參數即可
$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){ //處理data數據});
第三種方法是使用getScript方法
//此時也可以在函數外定義foo方法function foo(data){ //處理data數據}$.getScript('http://www.a.com/user?id=123&callback=foo');
實例演練:
index.html
<!doctype html><html><head><meta charset="utf-8"><title>jsonp</title><script src="jquery-1.8.0.min.js"></script><script> $.ajax({ type : "post", url : "jsonp.php?name=zhaoxiace&age=30", dataType : "jsonp", jsonp: "callbackParam",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(默認為:callback) jsonpCallback:"callbackFunction",//自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名 success : function(data){ console.log(data.statusCode + "/" + data.message + "/" + data.name + "/" + data.age); }, error:function(){ alert('請求失敗'); } });</script></head>
jsonp.php
<?$data["age"] = $_GET['age'];$data["name"] = $_GET['name'];$data["statusCode"]="200";$data["message"]="成功";$tmp= json_encode($data); //json數據echo $callback . '(' . $tmp .')'; //返回格式,必需?>
PS:關于json操作,這里再為大家推薦幾款比較實用的json在線工具供大家參考使用:
在線JSON代碼檢驗、檢驗、美化、格式化工具:
http://tools.VeVB.COm/code/json
JSON在線格式化工具:
http://tools.VeVB.COm/code/jsonformat
在線XML/JSON互相轉換工具:
http://tools.VeVB.COm/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉換工具:
http://tools.VeVB.COm/code/jsoncodeformat
在線json壓縮/轉義工具:
http://tools.VeVB.COm/code/json_yasuo_trans
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery操作json數據技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答