javascriptでjsonデータを取得できたのですが

Question

shuheiok

3

3もっと見る

1000pt

ウェブ制作

javascriptでjsonデータを取得できたのですが

取得したデーターの下に「さらに読み込む」「read more」みたいなリンクがあり、クリックすると、遷移なしに下の方にpage=2、page=3のデータを取得していくにはどうすればいいでしょうか?

<script type="text/javascript"]]>
function show_posts_widget(root) {
var tags = "<ul>";
for (var i = 0; i < root.posts.length; i++) {
tags += '<li><a href="' + root.posts[i].url + '">' + root.posts[i].title + '</a></li'+'>';
}
tags += '</ul'+'>';
document.writeln(tags);
}
</script>

<script type="text/javascript" src="http://test.com/api/get_recent_posts/?callback=show_posts_widget&read_more=More&page=1"></script>

回答の条件

1人5回まで

登録：2013/10/18 14:34:54
終了：2013/10/18 23:12:56

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

質問者から

shuheiok2013/10/18 22:37:19

ありがとうございます。

var page = root.pages + 1;のところで

root.pagesの値がずっと同じな為"read more ..." をクリックしても

ページ数が加算されず、ずっと同じページが表示されます。

pageを1加算していくのに

なにかいい代替方法はありますでしょうか？

規約違反として通知

きゃづみぃ 2013/10/18 14:38:08

人力検索の質問一覧とか参考になるかな？

人力検索はてな http://q.hatena.ne.jp/1382074494 こちら.. 2013-10-19 14:26:04

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2013-10-18T16:53:47+09:00

Wordpress の JSON API を使うということで良いんですよね？
ページ数や、取得した投稿数なども使ってます。

こんな感じでどうでしょうか。

<script type="text/javascript">
/*
    指定されたページの投稿を取得する
 */
function json_call(page) {
    var URL = "http://test.com/api/get_recent_posts/?callback=show_posts_widget&read_more=More&";
    var e = document.createElement("script")
    e.src = URL + "page=" + page;
    document.body.appendChild(e);
}

/*
    JSON 形式のデータから、投稿のリストを作成する。
 */
function show_posts_widget(root) {
    var tags = "<ul>";
    for (var i = 0; i < root.posts.length; i++) {
        tags += '<li><a href="' + root.posts[i].url + '">' + root.posts[i].title + '</a></li'+'>';
    }
    tags += "</ul>";

    var e = document.createElement("DIV");
    e.className = "posts";
    e.innerHTML = tags;
    document.body.appendChild(e);

    /*
        次の投稿を取得するリンク
    */
    if (root.count * root.pages < root.count_total) {   // まだ投稿があるなら...

        e = document.createElement("A");
        e.href = "#";
        e.onclick = function() {
            // 次のページを読み込み
            var page = root.pages + 1;
            json_call(page);

            // ひとつ前のリンクは消しておく
            var me = this;
            me.parentNode.removeChild(me);

            return false;
        }
        e.innerHTML = "read more ...";
        document.body.appendChild(e);
    }
}

// 1ページ目を表示する
window.onload = function() {
        json_call(1);
    }
</script>

<style>
DIV.posts {
    border: 1px solid green;
}
</style>


<body>
</body>

取得したデータをリストにするのには、document.write ではなく innerHTML を使ってます。
何となくですが、<UL> を <DIV> で囲みました。
最後のページを取得したら、"read more ..." は表示しないようにしています。

追記です。

var page = root.pages + 1;のところで
root.pagesの値がずっと同じな為"read more ..." をクリックしても
ページ数が加算されず、ずっと同じページが表示されます。
pageを1加算していくのに
なにかいい代替方法はありますでしょうか？

http://wordpress.org/plugins/json-api/other_notes/#Method:-get_recent_posts
上記の Response の例を見ると、pages は増えていきそうな感じなんですけどね。

ちょっと、かっこ悪いんですが、最後に表示したページ番号を持つようにしたのがこちらです。

<script type="text/javascript">
// 最後に表示したページ
last_page = 1;

/*
    指定されたページの投稿を取得する
 */
function json_call(page) {
    var URL = "http://test.com/api/get_recent_posts/?callback=show_posts_widget&read_more=More&";
    URL = "http://localhost/cgi-bin/a.rb?callback=show_posts_widget&";
    var e = document.createElement("script");
    e.src = URL + "page=" + page;
    document.body.appendChild(e);
}

/*
    JSON 形式のデータから、投稿のリストを作成する。
 */
function show_posts_widget(root) {
    var tags = "<ul>";
    for (var i = 0; i < root.posts.length; i++) {
        tags += '<li><a href="' + root.posts[i].url + '">' + root.posts[i].title + '</a></li'+'>';
    }
    tags += "</ul>";

    var e = document.createElement("DIV");
    e.className = "posts";
    e.innerHTML = tags;
    document.body.appendChild(e);

    /*
        次の投稿を取得するリンク
    */
    if (root.count * root.pages < root.count_total) {   // まだ投稿があるなら...

        e = document.createElement("A");
        e.href = "#";
        e.onclick = function() {
            // 次のページを読み込み
            last_page += 1;
            json_call(last_page);

            // ひとつ前のリンクは消しておく
            var me = this;
            me.parentNode.removeChild(me);

            return false;
        }
        e.innerHTML = "read more ...";
        document.body.appendChild(e);
    }
}

// 1ページ目を表示する
window.onload = function() {
        json_call(1);
    }
</script>

<style>
DIV.posts {
    border: 1px solid green;
}
</style>

a-kuma3 · Accepted Answer · 2013-10-18T16:53:47+09:00

Wordpress の JSON API を使うということで良いんですよね？
ページ数や、取得した投稿数なども使ってます。

こんな感じでどうでしょうか。

<script type="text/javascript">
/*
    指定されたページの投稿を取得する
 */
function json_call(page) {
    var URL = "http://test.com/api/get_recent_posts/?callback=show_posts_widget&read_more=More&";
    var e = document.createElement("script")
    e.src = URL + "page=" + page;
    document.body.appendChild(e);
}

/*
    JSON 形式のデータから、投稿のリストを作成する。
 */
function show_posts_widget(root) {
    var tags = "<ul>";
    for (var i = 0; i < root.posts.length; i++) {
        tags += '<li><a href="' + root.posts[i].url + '">' + root.posts[i].title + '</a></li'+'>';
    }
    tags += "</ul>";

    var e = document.createElement("DIV");
    e.className = "posts";
    e.innerHTML = tags;
    document.body.appendChild(e);

    /*
        次の投稿を取得するリンク
    */
    if (root.count * root.pages < root.count_total) {   // まだ投稿があるなら...

        e = document.createElement("A");
        e.href = "#";
        e.onclick = function() {
            // 次のページを読み込み
            var page = root.pages + 1;
            json_call(page);

            // ひとつ前のリンクは消しておく
            var me = this;
            me.parentNode.removeChild(me);

            return false;
        }
        e.innerHTML = "read more ...";
        document.body.appendChild(e);
    }
}

// 1ページ目を表示する
window.onload = function() {
        json_call(1);
    }
</script>

<style>
DIV.posts {
    border: 1px solid green;
}
</style>


<body>
</body>

取得したデータをリストにするのには、document.write ではなく innerHTML を使ってます。
何となくですが、<UL> を <DIV> で囲みました。
最後のページを取得したら、"read more ..." は表示しないようにしています。

追記です。

var page = root.pages + 1;のところで
root.pagesの値がずっと同じな為"read more ..." をクリックしても
ページ数が加算されず、ずっと同じページが表示されます。
pageを1加算していくのに
なにかいい代替方法はありますでしょうか？

http://wordpress.org/plugins/json-api/other_notes/#Method:-get_recent_posts
上記の Response の例を見ると、pages は増えていきそうな感じなんですけどね。

ちょっと、かっこ悪いんですが、最後に表示したページ番号を持つようにしたのがこちらです。

<script type="text/javascript">
// 最後に表示したページ
last_page = 1;

/*
    指定されたページの投稿を取得する
 */
function json_call(page) {
    var URL = "http://test.com/api/get_recent_posts/?callback=show_posts_widget&read_more=More&";
    URL = "http://localhost/cgi-bin/a.rb?callback=show_posts_widget&";
    var e = document.createElement("script");
    e.src = URL + "page=" + page;
    document.body.appendChild(e);
}

/*
    JSON 形式のデータから、投稿のリストを作成する。
 */
function show_posts_widget(root) {
    var tags = "<ul>";
    for (var i = 0; i < root.posts.length; i++) {
        tags += '<li><a href="' + root.posts[i].url + '">' + root.posts[i].title + '</a></li'+'>';
    }
    tags += "</ul>";

    var e = document.createElement("DIV");
    e.className = "posts";
    e.innerHTML = tags;
    document.body.appendChild(e);

    /*
        次の投稿を取得するリンク
    */
    if (root.count * root.pages < root.count_total) {   // まだ投稿があるなら...

        e = document.createElement("A");
        e.href = "#";
        e.onclick = function() {
            // 次のページを読み込み
            last_page += 1;
            json_call(last_page);

            // ひとつ前のリンクは消しておく
            var me = this;
            me.parentNode.removeChild(me);

            return false;
        }
        e.innerHTML = "read more ...";
        document.body.appendChild(e);
    }
}

// 1ページ目を表示する
window.onload = function() {
        json_call(1);
    }
</script>

<style>
DIV.posts {
    border: 1px solid green;
}
</style>

javascriptでjsonデータを取得できたのですが

ベストアンサー

a-kuma3497421542013/10/18 16:53:47

その他の回答（0件）

a-kuma3497421542013/10/18 16:53:47ここでベストアンサー

質問者から

コメント（1件)

この質問への反応（ブックマークコメント）

トラックバック