jQueryでloadしたphpをapendToしたいのですが。

質問

jQueryのload関数を使って、日付を元にランダムな10ケタの数字を生成するプログラム（rand.php）を読み込み、そのプログラムの結果をcontentsというIDのdiv内にappendToしたいのです。
そして、５秒ごとにrand.phpを読み込み、そのたびにcontentsというIDのdiv内に結果をappendToしたいのです。
イメージとしては下記のような感じになります。

$(function(){
function loadAndAppend(){
$("div#contents").apendTo(load("rand.php"));
setTimeout(loadAndAppend, 5000);
};
loadAndAppend();
});

しかし、これだとうまくいきません。apendTo(load("rand.php"))という部分がおかしいのでしょうが、これをどう直せばよいか分かりません。

ぜひとも解決法を教えていただけないでしょうか。

回答No.3

x_jouet_x · ベストアンサー

上書きではなく追加したいということであれば、私ならajax()関数を使います。

回答＃２でご指摘があったsetInterval()関数の件(すいません。これは私の記載ミスでした)を踏まえて、

function loadAndAppend(){
$.ajax({
url: "rand.php",
method: "get",
dataType: "text",
success: function(data, dataType) {
$("div#contents").append(data + "<br/>");
}
});
};
setInterval(loadAndAppend, 5000);

このような感じに記述します。

＃私自身、load()関数やget()関数よりもajax()関数ばかり使用しているので上記のソースコードの方が書きやすいです・・・。

お礼

こちらを参考にしたところ、見事にうまくいきました！
これがコールバック関数ってヤツなのでしょうか。
なにはともあれ、ありがとうございました！！

回答No.2

fujillin

よくわかりませんが…

一発でうまくいかないのであれば、非表示の要素（取り込み専用の要素）に一度取り込んでから、その内容を目的の要素の内容に付け加えてあげればいいのでは？

ついでながら、setＩｎｔｅｒｖａｌで自分自身を呼び出すと、処理が累積して発生するはずだと思いますが??
ちなみに、以下の簡単なテストを実行してみると、表示のインクリメントは0、1、2、3…ではなく、0、1、2、4、8、16…となるので多重処理になっていることがわかります。

お礼

確かにその方法もありましたね！
ご教示ありがとうございます。

回答No.1

x_jouet_x

jQueryのload()関数は外部ファイル(htmlなど)をロードするだけでなく、それをDOMにappendするところまでやってしまいます。

ですので、この場合のload()関数の使い方は

$("div#contents").load("rand.php");

の記述でいいはずです。

また、
＞５秒ごとにrand.phpを読み込み
とありますが、この場合setTimeout()関数ではなくsetInterval()関数を使用します。

それをふまえて全体を書き直すと、

function loadAndAppend(){
$("div#contents").load("rand.php");
setInterval(loadAndAppend, 5000);
};

のようになります。

お礼

ご返答ありがとうございます！

試しに実験してみたところ、５秒ごとに読み込まれるのですが
appendというより上書き（html()のような挙動）になってしまいます。

読み込まれるごとに、その結果をどんどん追加（上書きではなく）していきたいのです。

loadしたものを変数に代入してappend、というのも試してみたのですが、こちらもうまくいきませんでした。

$(function(){
function loadAndAppend(){
var myData = $.load("rand.php");
$("div#contents").apendTo(myData);
setInterval(loadAndAppend, 5000);
};

不可能ではないと思うのですが。。。