質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2456閲覧

.ajaxでphpから受け取ったオブジェクトをfor文で繰り返し表示させたいのですが

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/02/14 08:52

編集2016/02/14 09:41

チャットを作っているのですが
.ajaxでphpから受け取ったオブジェクトをfor文で繰り返し表示させるようなコードを書いたつもりなのですが
.html()だと繰り返した最後のオブジェクトしか表示されません
どうすれば受け取ったすべてのオブジェクトを表示できるのでしょうか

こんな感じのオブジェクトです
name:"???"
num:"1"
postnum:2
res:"1"
time:"2016-02-14 02:39:03

.append()で表示させた場合下のように繰り返しレスが表示されるのですが

4
???
4
2016-02-14 02:39:13

3
???
3
2016-02-14 02:39:06

2
???
2
2016-02-14 02:39:05

1
???
1
2016-02-14 02:39:03

setTimeoutで更新した場合上書きではなくどんどん下に表示されていってしまいます
ですので.html()で完全に上書きといったようにしたかったのですが.html()だと上書きはされるのですが
繰り返した最後のレスしか表示されないといった状況です。
上のレスでいえば

4
???
4
2016-02-14 02:39:13

だけ表示されるということになります

すごくわかりづらい説明で申し訳ないのですが回答お願いします

JavaScript

1$(document).ready(function(){ 2 $('#form').submit(function(){ 3 $('#post').attr('hidden',true); 4 $.ajax({ 5 type:'POST', 6 url:'post.php', 7 datatype:'json', 8 data:$('#message').serialize(), 9 }) 10 .done(function(data){ 11 var res = JSON.parse(data); 12 if (res!==null && res.postnum==1) { 13 $('#message').after('<p id="thanks">'+'Thanks!'+'</p>'); 14 $('#message').val(""); 15 }else{ 16 $('#message').after('<p id="fuck">'+'Fuck!!!'+'</p>'); 17 } 18 }) 19 .fail(function(){ 20 $('#res').html('er'); 21 }) 22 function resreturn(){ 23 $('#thanks').remove(); 24 $('#fuck').remove(); 25 $('#post').attr('hidden',false); 26 } 27 setTimeout(resreturn,666); 28 return false; 29 }); 30function all(){ 31 $.ajax({ 32 type:'POST', 33 url:'post.php', 34 datatype:'json', 35 }) 36 .done(function(data){ 37 var log = JSON.parse(data); 38 console.log(log); 39 if (log !== null && log[0].postnum==2 ) { 40 var typelog = log[0].num; 41 for (var i = 0 ; i < typelog ; i++) { 42 $('#log').append('<p id="res">'+log[i].num+'<br/>'+log[i].name+'<br/>'+ 43 log[i].res+'<br/>'+log[i].time+'</p>'); 44 } 45 console.log('ok'); 46 }else{ 47 console.log("error"); 48 } 49 }) 50 setTimeout(all,2000); 51 } 52 all(); 53});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yng13

2016/02/14 09:12 編集

すみません、コード表示ができないので解答欄に書きます。
guest

回答2

0

ベストアンサー

setTimeoutで更新した場合上書きではなくどんどん下に表示されていってしまいます

ですので.html()で完全に上書きといったようにしたかったのですが.html()だと上書きはされるのですが
繰り返した最後のレスしか表示されないといった状況です。

"上書き" というのはもしかして、新しく追加する要素が先頭になるようにしたい。と言うことでしょうか?
で、あればjQueryであれば.prepend()を使えば実現できます。
.prepend( content )

content: HTML文字列, DOM要素, jQueryオブジェクトを指定して、マッチした各要素内の一番前に挿入します。

.prepend() | jQuery 1.9 日本語リファレンス | js STUDIO

javascript

1$('#log').prepend('<p id="res">'+log[i].num+'<br/>'+log[i].name+'<br/>'+ 2 log[i].res+'<br/>'+log[i].time+'</p>');

Ajaxで取得したものだけを表示させたい場合、上記の方法では前もって#logを空にする必要があります。
そしてこの書き方だとDOMへの挿入の回数が多いし、ループ内で何度もjQueryオブジェクトの初期化が実行されるのでパフォーマンス的にはあまりよろしくないかと思います。for文内では挿入するHTMLを作成しておき、最後にまとめて#logに入れるようにするのが良いでしょう。

javascript

1if (log !== null && log[0].postnum == 2) { 2 var typelog = log[0].num; 3 var html = ''; 4 for (var i = 0; i < typelog; i++) { 5 // for文内では挿入するHTMLを作るだけ 6 html = '<p id="res">' + log[i].num + '<br/>' + log[i].name + '<br/>' + 7 log[i].res + '<br/>' + log[i].time + '</p>' + html; 8 } 9 /* note. 最後のから取り出せばOKなので下記でもOK 10 while(typelog--) { 11 // for文内では挿入するHTMLを作るだけ 12 html += '<p id="res">' + log[i].num + '<br/>' + log[i].name + '<br/>' + 13 log[i].res + '<br/>' + log[i].time + '</p>'; 14 } 15 */ 16 // #log 内を空にして Ajaxで取得したものだけを表示させる場合は .html()で↓ 17 // $('#log').html( html ); 18 19 // #log 内の先頭に追加するのであれば .prepend()で↓ 20 $('#log').prepend( html ); 21}

※ 動作確認とかしてないのであしからず

投稿2016/02/14 09:57

編集2016/02/14 09:58
KiKiKi_KiKi

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/02/15 09:39

稚拙な文章から伝えたい事を汲み取りコードにする なんだただの神か
guest

0

このjavascriptコード、エラーになりませんか?
jsのコードを貼るのであれば、全体を貼っていただいたほうがいいです。
あと、投稿時のコード投稿のボタンを使ってもらうと見やすく表示されます。

javascript

1function all() { 2 $.ajax({ 3 type: 'POST', 4 url: 'post.php', 5 datatype: 'json', 6 }) 7 .done(function (data) { 8 var log = JSON.parse(data); 9 10 if (log !== null && log[0].postnum == 2) { 11 var typelog = log[0].num; 12 13 for (var i = 0; i < typelog; i++) { 14 $('#log').html('<p id="res">' + log[i].num + '<br/>' + log[i].name + '<br/>' + 15 log[i].res + '<br/>' + log[i].time + '</p>'); 16 } 17 console.log('ok'); 18 } else { 19 console.log("error"); 20 } 21 }) // <-ここにセミコロン(;)がない 22 setTimeout(all, 2000); 23} // <-ここがfunction all(){}のとじカッコですが、セミコロンがない 24all(); 25}) // <-ここに対応する開始のカッコ({がないです 26;

投稿2016/02/14 09:12

yng13

総合スコア215

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chitoku

2016/02/14 12:20

function all() {} は function 文なのでセミコロンを打つべき場所ではありません
退会済みユーザー

退会済みユーザー

2016/02/15 09:44

ご指摘ありがとうございます。 質問の仕方を改善させていただきます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問