スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画面遷移しないもっと見るボタンの実装

list.phpにもっと見るボタンを追加してみましょう。

list.phpをちょっと修正し、もっと見るを押した際にデータを取得するgetlist.phpを新規作成します。

仕組みは前回とほとんど同じで、ボタンを押した際にAjaxを使い裏でPHPを呼び出し、xvideosの次のページを取得、手に入れたHTMLからサムネイルと動画URLを抜き出してlist.phpと同じような形でHTMLを返します。javascriptで返ってきたHTMLを下に追加していきます。

xvideosの仕様的に新着は10ページだけなので、それに合わせて10ページ分表示したらボタンを押せないよう、非表示にします。

ソースは続きから。
list.php

<?php
require_once('simple_html_dom.php');

$html = file_get_html('http://jp.xvideos.com/');
$area = $html->find('div.mozaique', 0);
foreach ($area->find('div.thumbBlock') as $div) {
$vurl = $div->id;
$thum = $div->find('img', 0)->src;

$vlist[] = array('vurl' => $vurl,
'thum' => $thum);
}
$body = "";
foreach ($vlist as $item) {
$video = explode("_", $item["vurl"]);
$body .= "<a href='view.php?video=" . $video[1] . "&thum=" . $item["thum"] . "' target='_blank'>";
$body .= "<img src='" . $item["thum"] . "'>";
$body .= "</a>";
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>xvideosの新着動画一覧</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
img {
-webkit-filter: blur(2px);
}
</style>
</head>
<body>
<div id="list">
<?php
echo $body;
?>
</div>
<input type="button" id="more" value="もっと見る" class="btn btn-primary" data-loading-text="読み込み中..."/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var nowPage = 0;
$("#more").click(function () {
$(this).button('loading');
$.ajax({
url: 'getlist.php',
type: 'GET',
data: {
page:nowPage+1
},
dataType: 'html'
})
.done(function(data) {
$("#list").append(data);
nowPage++;
if (nowPage >= 9) {
$("#more").hide();
} else {
$("#more").button('reset');
}
})
.fail(function(data) {
$("#list").html(data.responseText);
$("#more").button('reset');
});
return false;
});
});
</script>
</body>
</html>

getlist.php

<?php
require_once('simple_html_dom.php');
header('Content-Type:text/html; charset=utf-8');

$page = isset($_GET['page']) ? intval($_GET['page']) : 0;
$url = 'http://jp.xvideos.com/';
if ($page > 0 && $page < 10) {
$url .= 'home/'.$page;
}
$html = file_get_html($url);
$area = $html->find('div.mozaique', 0);
foreach ($area->find('div.thumbBlock') as $div) {
$vurl = $div->id;
$thum = $div->find('img', 0)->src;

$vlist[] = array('vurl' => $vurl,
'thum' => $thum);
}
$body = "";
foreach ($vlist as $item) {
$video = explode("_", $item["vurl"]);
$body .= "<a href='view.php?video=" . $video[1] . "&thum=" . $item["thum"] . "' target='_blank'>";
$body .= "<img src='" . $item["thum"] . "'>";
$body .= "</a>";
}
echo $body;
?>

やっていることは今までとそれほど変わらないのですが、だんだんと複雑になってきました。

細かい解説は次回から。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。