JSFiddle - React, Tailwind, and code Playground
HTML
<b>XMLHttpRequest crossdomain & JSON :</b> The language isocode and item names are successfully retrieved from the <a href="http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json">external data (Wikidata)</a>.<br />
Tests 1. ($.ajax+jsonp), Test 2. ($.ajax+calback=?), Test 3. ($.getJSON+calback=?).
<div id="code1"></div>
<div id="code2"></div>
<div id="code3"></div>
JavaScript
// Solution 1: $.ajax() and jsonp:
$.ajax({
// type: "GET",
// crossDomain: true,
dataType: "jsonp", // jsonp
url: 'http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json',
// data: data,
// success: 1,
}).done(function ( data ) {
var items = [];
$.each(data.entities.Q142.labels.fr, function(key, val) {
items.push('<li id="' + key + '1">Test 1:' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#code1');
});
// Solution 2: $.ajax(), json, &calback=?:
$.ajax({
// type: "GET",
// crossDomain: true,
dataType: "json", // json
url: 'http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json&callback=?', // '&callback=?
// data: data,
// success: 1,
}).done(function ( data ) {
var items = [];
$.each(data.entities.Q142.labels.fr, function(key, val) {
items.push('<li id="' + key + '2">Test 2:' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#code2');
});
// Solution 3: $.getJSON() & calback=?:
$.getJSON('http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json&callback=?', function(data) {
var items = [];
$.each(data.entities.Q142.labels.fr, function(key, val) {
items.push('<li id="' + key + '3">Test 3: ' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#code3');
});