快捷導(dǎo)航

jQuery使用JSONP實現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解

更新時間：2017年05月04日 11:19:25 作者：yhdsir

這篇文章主要介紹了jQuery使用JSONP實現(xiàn)跨域獲取數(shù)據(jù)的三種方法,結(jié)合實例形式對比分析了jsonp跨域獲取數(shù)據(jù)的3種常用操作技巧,需要的朋友可以參考下

本文實例講述了jQuery使用JSONP實現(xiàn)跨域獲取數(shù)據(jù)的三種方法。分享給大家供大家參考，具體如下：

第一種方法是在ajax函數(shù)中設(shè)置dataType為'jsonp'

$.ajax({
  dataType: 'jsonp',
  url: 'http://www.a.com/user?id=123',
  success: function(data){
    //處理data數(shù)據(jù)
  }
});

第二種方法是利用getJSON來實現(xiàn)，只要在地址中加上callback=?參數(shù)即可

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
  //處理data數(shù)據(jù)
});

第三種方法是使用getScript方法

//此時也可以在函數(shù)外定義foo方法
function foo(data){
  //處理data數(shù)據(jù)
}
$.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回調(diào)函數(shù)名的參數(shù)名(默認為:callback)
    jsonpCallback:"callbackFunction",//自定義的jsonp回調(diào)函數(shù)名稱，默認為jQuery自動生成的隨機函數(shù)名
    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數(shù)據(jù)
echo $callback . '(' . $tmp .')'; //返回格式，必需
?>

PS：關(guān)于json操作，這里再為大家推薦幾款比較實用的json在線工具供大家參考使用：

在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: