チャットを作っているのですが
.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});
回答2件
あなたの回答
tips
プレビュー