2014-02-11 99 views
7

我試圖從一家公司託管的網站收集JSON數據。我不在同一個域中,所以我不能訪問它。從標題看來,它們似乎也不使用CORS。所以我試圖使用JSONP來解析數據,但它似乎不起作用。我試過做$ .getJSON和$ .ajax,但那些拋出錯誤,不要調用函數。到目前爲止,這是我的解決方案,並且在服務器的響應中,它仍然不會將數據包裝在getResults中。使用JSONP從另一臺服務器獲取JSON數據

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<script type="text/javascript" src="jquery/js/jquery-1.9.0.min.js"></script> 

<script> 
function getResults(data) { 
    console.log(data[0].name); 
} 
</script> 
<script type='text/javascript' src='https://solstice.applauncher.com/external/contacts.json?callback=getResults'></script> 

我是相當新的HTML,JavaScript和jQuery的,所以我真的很困惑,爲什麼響應被包裝在功能和控制檯日誌ISN沒有工作。任何幫助,將不勝感激。

+0

給出的網址沒有調用任何函數,只是返回數據。它不適用於JSONP調用。 – lincolnk

回答

2

JSONP是一種技術,通過該技術,您可以將請求放入腳本標記URL(允許到任何域),並在該URL中傳遞一個參數,該參數指示您希望生成的腳本返回打電話並傳遞您的數據。在這種情況下,它看起來像指定回調函數名爲getResults

爲了使JSONP正常工作,您發送請求的服務器必須專門支持它,因爲它需要特定類型的響應格式,並且它使得來自任何瀏覽器的任何域都能發出請求,而不是所有站點都想要的東西啓用。

因此,首先需要了解的是,如果您要求數據的服務器支持JSONP或不支持,那麼請確保您完全理解它將如何格式化響應以及如何預期回調函數被指定(公約約定與callback=xxx URL參數,但它不必這樣做。

如果你想要數據的服務器不支持JSONP,那麼你根本無法使用JSONP從中獲取數據如果它不支持其他的跨域請求策略,那麼你不能通過瀏覽器網頁從它獲取數據,並且必須從瀏覽器以外的其他地方獲取數據(比如另一個服務器)

+0

我如何知道服務器是否支持JSONP? – user3299416

+0

@ user3299416 - 您必須查看該網站API的文檔以查看它支持的內容。您可能還必須以某種方式提出請求,才能知道您要求它執行JSONP。 – jfriend00

1

JSONP是服務器必須實現的方法。

如果您確定服務器接受並理解JSONP,那麼您用來傳遞迴調名稱的參數可能不是callback。如果他們有一個,請看他們的文檔。

否則,你根本無法從瀏覽器中獲取json數據。

0

here活樣本:

JSONP - JSON與填充,即。JavaScript對象包裹在一個回調,在我們的情況下,它jsonCallback

這是文件的內容:用於檢索文件

jsonCallback(
    { 
     "sites": 
     [ 
      { 
       "siteName": "JQUERY4U", 
       "domainName": "http://www.jquery4u.com", 
       "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; Code Snippets." 
      }, 
      { 
       "siteName": "BLOGOOLA", 
       "domainName": "http://www.blogoola.com", 
       "description": "Expose your blog to millions and increase your audience." 
      }, 
      { 
       "siteName": "PHPSCRIPTS4U", 
       "domainName": "http://www.phpscripts4u.com", 
       "description": "The Blog of Enthusiastic PHP Scripters" 
      } 
     ] 
    } 
); 

代碼:

(function($) { 
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?'; 

$.ajax({ 
    type: 'GET', 
    url: url, 
    async: false, 
    jsonpCallback: 'jsonCallback', <-- callback here 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(json) { 
     console.dir(json.sites); 
    }, 
    error: function(e) { 
     console.log(e.message); 
    } 
}); 

})(jQuery); 
+1

我得到這個錯誤:'Uncaught SyntaxError:Unexpected token:' – Si8

5

您可以使用許多方法,但兩個最方便的是AJAX調用或使用jQuery的getJSON()方法

使用AJAX調用

$(document).ready(function() { 
    $(".btn").click(function() { 
    $.ajax({type: "get", 
      url: "http://api.forismatic.com/api/1.0/", 
      data: {method: "getQuote",format: "jsonp",lang: "en"}, 
      dataType: "jsonp", 
      jsonp: "jsonp", 
      jsonpCallback: "myJsonMethod" 
    }); 
    }); 
}); 
function myJsonMethod(response){ 
    console.log (response); 
} 

response Object具有從API調用中的所有JSON數據的上述方法。

使用的getJSON()

$(document).ready(function() { 
    $(".btn").click(function() { 
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?"); 
    }); 
}); 
function myJsonMethod(response){ 
    console.log (response); 
} 

在同樣的事情發生上述方法。

注 - > JSONP取回響應函數的名稱。

+0

在你的第一個例子「Using Ajax Call」中,你使用type:「POST」。 JSONP僅適用於GET請求。 JSONP就像

相關問題