- ベストアンサー
外部ファイルでクエリを実行し、ローディング画像を表示する方法
- 外部ファイルでクエリを実行する際、ローディング画像を表示する方法について説明します。
- load.phpの中でデータベース接続とmysql_queryを実行し、index.phpで結果を表示する方法について説明します。
- load.phpをindex.phpに書き込んだ場合との違いについても触れます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
load.phpで何も出力されていませんが、$num を出力しなければならないのは「load.php側」です。index.phpではありませんよ。 あるいは誤解なさっているかも。 jQueryでのload()は、phpでのinclude等とは異なります。 http://～/load.php と直接アクセスしてみて下さい。そこに表示されるものが load()で取り込まれます。なのでload.phpで何も出力しなければ当然何も表示されません。 また >jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数 この「全て」にload.phpの完了は含まれませんよ。 load.phpの完了を検知してfadeout等いろいろ実行なさりたいようですから、load()よりも ajax が妥当でしょう。ざっくりとでしたら -------------------------- [index.php] <html> <head> <script language="JavaScript" src="/jquery.js"></script> <script type="text/javascript"> $.ajax({ url: "load.php", }).then( function(data){ //load.php完了後にしたい処理 $("#sample").fadeOut(800); $("#container").html(data); } ); </script> <div id=sample style="z-index:10;position:absolute;"> <div id="loader"><img src="loader.gif" /></div> </div> <div id="container"></div> ----------------------------- [load.php] // 重い処理 echo "結果は $num 件です"; ----------------------------- 詳細は [ jQuery ajax ローディング ]等で検索してみて下さい。
その他の回答 (1)
- JaneDue
- ベストアンサー率75% (263/350)
load.php内では、$num = ～と取得して終わるのではなく、何らかの出力をしてください。 echo "結果: $num 件";など 「出力したもの」が#sampleに表示されるはずです。 ※phpを2つに分けるということは、まったく別のphpとして動作するということです。 なので、load.php内で取得した変数 $num はload.php内だけで有効です。
お礼
ご回答ありがとうございます。 php間で変数を渡すことはできないのですね。 質問時に書いたコードの位置に$numを出力することはできました。 ただ、私のミスでコード自体を書き間違えておりまして ご回答いただいた通りに出力をした場合、「ローディング画像表示後に$numを出力する」ということができません。 やりたいことをまとめますと、 (1)load.phpでクエリを実行している間にローディング画像を表示する。(実行に時間がかかるため) (2)クエリの実行結果をindex.phpに表示する。 です。このような処理を実現できないでしょうか。 修正版のコードを下記に書きました。 [index.php] <script type="text/javascript"> $(function(){ $("#sample").load("load.php"); }) </script> <script type="text/javascript"> $('head').append( '<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>' ); jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数 var pageH = $("#container").height(); $("#fade").css("height", pageH).delay(900).fadeOut(800); $("#loader").delay(600).fadeOut(300); $("#container").css("display", "block"); }); </script> <div id=sample> <div id="loader"><img src="edit/img/loader.gif" width="24" height="24" alt="Loading..." /></div> <div id="fade"></div> </div> <div id="container"> <?php echo $num; ?> </div> [load.php] <?php $conn = mysql_connect("localhost","DB","pass",true); mysql_query("SET NAMES utf8") or die("can not SET NAMES utf8"); mysql_select_db('DB',$conn); $sql = "SELECT ～" $result = mysql_query($sql) or die(mysql_error()); $num = mysql_num_rows($result); ?>
お礼
詳しく説明していただきありがとうございました。 完成しました。