<div id="wrapper">
<h1>ajaxを使ってwordpressの投稿データを取ってくる</h1>
<p>取得できる投稿数はデフォルトで10件、最大100件です。</p>
<button id="btn_getdata">データを取得する</button>
<button id="btn_delete">データを削除する</button>
<hr>
<ul id="wp_list">
</ul>
</div>#wrapper{
width:800px;
margin:auto;
}
button{
margin: 0 0 20px 0;
}var all_data = [];
$("#btn_delete").on("click",function(){
$('#wp_list').children().remove();
});
$("#btn_getdata").on("click", function () {
all_data = [];
$.ajax({
type: "GET",
dataType: "json",
url:
"https://the-zombis.sakura.ne.jp/wp/wp-json/wp/v2/posts?_fields=title,link"
})
.done(function (response) {
all_data=[]; //初期化
all_data = response;
for (var i = 0; i < all_data.length; i++) {
var title = all_data[i].title.rendered; //記事のタイトル
var link = all_data[i].link; //記事のリンクURL
var li="<li><a href='"+link+"'>"+title+"</a></li>"
$("#wp_list").append(li);
}
})
.fail(function (XMLHttpRequest, textStatus, errorThrown) {
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
});
return false;
});
External CSS
This Pen doesn't use any external CSS resources.