別サーバーに設置したjsonファイルの読み込みで、dataType: ‘jsonp’を利用します。jsonpの利用に伴いjsonファイル内にコールバック関数を記述します。
- すべて
- お知らせ
- イベント
- 採用
html、CSSのコードは下記の記事と同様になります。
jsonのコードは下記になります。
jQuery側から指定するコールバック関数を記述するのがポイントです。
jsonp_data(
[
{
"cat": "お知らせ",
"item": [
{
"time": "2019/07/02",
"link": "#",
"linkTarget": "false",
"article": "お知らせ01：ダミーテキストダミーテキスト"
},
{
"time": "2019/06/21",
"link": "#",
"linkTarget": "false",
"article": "お知らせ02：ダミーテキストダミーテキスト"
}
]
},
{
"cat": "イベント",
"item": [
{
"time": "2019/07/24",
"link": "https://www.yahoo.co.jp/",
"linkTarget": "true",
"article": "イベント情報01：ダミーテキストダミーテキスト"
},
{
"time": "2019/07/18",
"link": "https://www.msn.com/ja-jp",
"linkTarget": "false",
"article": "イベント情報02：ダミーテキストダミーテキスト"
}
]
},
{
"cat": "採用ニュース",
"item": [
{
"time": "2019/07/11",
"link": "#",
"linkTarget": "false",
"article": "採用情報01：ダミーテキストダミーテキスト"
},
{
"time": "2019/07/11",
"link": "",
"linkTarget": "",
"article": "採用情報02：ダミーテキストダミーテキスト"
}
]
}
]
)jQuery書き換え前のjsonファイル読み込み部分のコードです。
$(function() {
$.ajax({
url: 'js/news.json',
dataType: 'json',
cache: false,
}).done(function(data) {続いて、jQuery書き換え後のjsonファイル読み込み部分のコードです。
読み込むjsonファイルは別サーバー設置のためurlを修正します。そして、jsonpCallbackでjsonファイル内に記述したコールバックの関数名を指定します。
$(function() {
$.ajax({
url: 'https://brick-plan.jp/xxxxx/news.json',
dataType: 'jsonp',
jsonpCallback: 'jsonp_data', //コールバック関数指定
cache: false,
}).done(function(data) {最後にjQuery書き換え後の全てのコードです。
$(function() {
$.ajax({
url: 'https://brick-plan.jp/xxxxx/news.json',
dataType: 'jsonp',
jsonpCallback: 'jsonp_data',
cache: false,
}).done(function(data) {
var insertContents = '';
var len1 = data.length;
for(var i = 0 ; i < len1 ; i++) {
var len2 = data[i].item.length;
for(var j = 0 ; j < len2 ; j++) {
insertContents += '<div class="news-content" data-category="';
if(data[i].cat == 'お知らせ'){
insertContents += 'catInfo">';
}else if(data[i].cat == "イベント"){
insertContents += 'catEvent">';
}else if(data[i].cat == "採用ニュース"){
insertContents += 'catRecruit">';
}
insertContents += '<p class="news-date">';
insertContents += data[i].item[j].time;
insertContents += '</p>';
insertContents += '<p class="tags">';
insertContents += data[i].cat;
insertContents += '</p>';
insertContents += '<p class="news-r">';
if(data[i].item[j].link == ''){
insertContents += data[i].item[j].article;
}else{
insertContents += '<a href="' + data[i].item[j].link + '"';
insertContents += ((data[i].item[j].linkTarget == "true") ? ' target="_blank"' : '') + '>';
insertContents += data[i].item[j].article;
insertContents += '</a>';
}
insertContents += '</p>';
insertContents += '</div>';
}
}
var sortData = $('.news-date' , insertContents).sort(function(a,b) {
if($(a).text() < $(b).text()) return 1;
if($(a).text() > $(b).text()) return -1;
return 0;
});
var insertContentsSort = '';
$(sortData).each(function(){
insertContentsSort += $(this).parent().prop("outerHTML");
});
var newsLink = $(".news_link li");
var limit = 5;
for(var i = 0 ; i < limit ; i++) {
var limitNews = $(insertContentsSort)[i];
$(limitNews).appendTo('.news-content-all').hide().fadeIn();
}
$(newsLink).click(function(){
$(newsLink).removeClass("active");
$(this).addClass("active");
var btnFilter = $(this).attr('data-filter');
if (btnFilter == 'catAll') {
$(".news-content").remove();
for(i = 0 ; i < limit ; i++) {
limitNews = $(insertContentsSort)[i];
$(limitNews).appendTo('.news-content-all').hide().fadeIn();
}
} else {
$(".news-content").remove();
for(i = 0 ; i < limit ; i++) {
limitNews = $(insertContentsSort).filter('[data-category = "' + btnFilter + '"]')[i];
$(limitNews).appendTo('.news-content-all').hide().fadeIn();
}
}
});
}).fail(function(jqXHR, textStatus) {
var errorMessage = '';
errorMessage += '<p>データの読み込みに失敗しました。';
errorMessage += 'ステータスコード：' + jqXHR.status + '、';
errorMessage += 'ステータス：' + textStatus + '</p>';
$(errorMessage).appendTo('.news-content-all');
});
});