在JSFiddle中鏈接外部JSON數據文件

有沒有辦法在JSFiddle中鏈接外部JSON數據？在JSFiddle中鏈接外部JSON數據文件

，我試圖在JSON數據拉與如下所述的代碼的一部分：

var xhr = new XMLHttpRequest(); 

xhr.open('GET', url: 'www.myurl.com/js/data/data.json', true); 
xhr.send(null);

我看到JSON數據放置的JavaScript部/內部放置的的jsfiddle內內，但我很好奇，如果可以在JSFiddle中使用它的url路徑從外部獲取JSON數據。

查看當前JSFiddle。

來源

2015-01-03 Andrew

有你閱讀本文檔：http://doc.jsfiddle.net/use/echo.html – cirtrus

爲Ajax請求，plnkr.co是很多比小提琴更友好。您可以在幾秒鐘內創建實際文件並指向這些文件 – charlietfl

您的示例（包括小提琴中的代碼）已損壞。

您可以通過使用此isntead修復：

xhr.open('GET', 'http://www.andrewwierzba.com/js/data/data.json', true);

然後，然而，你撞了南牆：

的XMLHttpRequest無法加載 http://www.andrewwierzba.com/js/data/data.json。否「訪問控制 - 允許來源」標題出現在請求的資源中。原因'http://fiddle.jshell.net'因此不允許訪問。

如何解決這是另一個問題，並且網上有很多關於交叉原點XHR的討論，因此請嘗試查找它。這很痛苦，這就是爲什麼大多數人嵌入json的原因。

更好的想法可能是使用「回聲」功能，正如@cirtrus在原帖的評論中提到的那樣。

來源

2015-01-03 21:57:23 MightyPork

您可以使用/ echo/json/URL來模擬JSON調用。在您爲例，你必須你的JSON文件

{ 
    "profiles": [ 
     { "firstName": "Jane", "lastName": "Doe", "gender": "female" }, 
     { "firstName": "John", "lastName": "Doe", "gender": "male" }, 
     { "firstName": "Akexander", "lastName": "Beth", "gender": "male" }, 
     { "firstName": "Sarah", "lastName": "Kelly", "gender": "female" } 
     { "firstName": "Rachel", "lastName": "Haiworth", "gender": "female" } 
    ] 
}

，並把它作爲參數傳遞給POST /回聲/ JSON /請求的內容。

var JSONData = { 
    "profiles": [ 
     { "firstName": "Jane", "lastName": "Doe", "gender": "female" }, 
     { "firstName": "John", "lastName": "Doe", "gender": "male" }, 
     { "firstName": "Akexander", "lastName": "Beth", "gender": "male" }, 
     { "firstName": "Sarah", "lastName": "Kelly", "gender": "female" } 
     { "firstName": "Rachel", "lastName": "Haiworth", "gender": "female" } 
    ] 
} 

new Request.JSON({ 
    url: '/echo/json/', 
    data: { 
     json: JSON.encode(JSONData), 
     delay: 3 
    },  
    onSuccess: function(response) { 
     // Function to onSucess 
    } 
}).send();

見http://doc.jsfiddle.net/use/echo.html

來源

2015-01-03 22:01:16 nanndoj

在JSFiddle中鏈接外部JSON數據文件

回答

相關問題