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回まで
  • 13歳以上
  • 登録:2013/10/18 14:34:54
  • 終了:2013/10/18 23:12:56

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4367ベストアンサー獲得回数18032013/10/18 16:53:47

ポイント1000pt

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>
id:a-kuma3

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

回答に追記しました。

2013/10/18 22:35:56
id:shuheiok

表示されました!
ご丁寧な回答ありがとうございました。

2013/10/18 23:12:35

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4367ベストアンサー獲得回数18032013/10/18 16:53:47ここでベストアンサー

ポイント1000pt

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>
id:a-kuma3

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

回答に追記しました。

2013/10/18 22:35:56
id:shuheiok

表示されました!
ご丁寧な回答ありがとうございました。

2013/10/18 23:12:35
id:shuheiok

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません