Laravel AJAX新しいデータを取得して表示する

Question

私はプロジェクトで作業していましたが、これまでのところAJAXを使用してデータベースにPOSTすることができました。ユーザーがデータを送信すると、ページは更新されませんが、データベースに転送します。

ここでは、ページを更新することなく、結果をユーザーに表示します。私はそれを理解しようと多くの時間を費やしましたが、今私は非常に固執しています。誰かが私を正しい方向に向けることができますか？私はウェブサイトのドキュメンテーションを読んだが、何時間ものビデオを見たが、まだ運がない。

これまでのコードです。

スクリプト

$.ajax({ 
    type: 'GET', //THIS NEEDS TO BE GET 
    url: '{{$video->id}}/shownew', 
    success: function (data) { 
     console.log(data); 
     $("#data").append(data); 
    }, 
    error: function() { 
     console.log(data); 
    } 
}); 

コントローラ

public function shownew($video) 
{ 
    $getstamps = DB::table('timestamps') 
        ->where('videoid', '=', $video) 
        ->orderByRaw('LENGTH(timestamp_time)', 'ASC') 
        ->orderBy('timestamp_time', 'asc') 
        ->get(); 

    return response()->json(array('success' => true, 'getstamps' => $getstamps)); 
} 

コンソール

{success: true, getstamps: Array(3)} 
getstamps: Array(3) 
    0: { 
     timestamp_id: 128, 
     videoid: "5", 
     timestamp_name: "Title", 
     timestamp_time: 1, 
     created_at: "2017-10-04 23:28:12", 
     … 
    } 
    1: { 
     timestamp_id: 129, 
     videoid: "5", 
     timestamp_name: "1", 
     timestamp_time: 1, 
     created_at: "2017-10-04 23:41:01", 
     … 
    } 
    2: { 
     timestamp_id: 130, 
     videoid: "5", 
     timestamp_name: "1", 
     timestamp_time: 1, 
     created_at: "2017-10-04 23:41:21", 
     … 
    } 
length: 3 
__proto__: Array(0) 
success: true 
__proto__: Object 

Answer 1

この問題が修正されました。

 $.ajax({ 
     type: 'GET', //THIS NEEDS TO BE GET 
     url: '{{$video->id}}/shownew', 
     dataType: 'json', 
     success: function (data) { 
      console.log(data); 
      container.html(''); 
      $.each(data, function(index, item) { 
      container.html(''); //clears container for new data 
      $.each(data, function(i, item) { 
        container.append('<div class="row"><div class="ten columns"><div class="editbuttoncont"><button class="btntimestampnameedit" data-seek="' + item.timestamp_time + '">' + new Date(item.timestamp_time * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0] +' - '+ item.timestamp_name +'</button></div></div> <div class="one columns"><form action="'+ item.timestamp_id +'/deletetimestamp" method="POST">' + '{!! csrf_field() !!}' +'<input type="hidden" name="_method" value="DELETE"><button class="btntimestampdelete"><i aria-hidden="true" class="fa fa-trash buttonicon"></i></button></form></div></div>'); 
      }); 
       container.append('<br>'); 
      }); 
     },error:function(){ 
      console.log(data); 
     } 
    }); 

Answer 2

ここでyのソリューションです問題は

$.ajax({ 
    type: 'GET', //THIS NEEDS TO BE GET 
    url: '{{$video->id}}/shownew', 
    success: function (data) { 
     var obj = JSON.parse(data); 
     var your_html = ""; 
     $.each(obj['getstamps'], function (key, val) { 
      your_html += "<p>My Value :" + val + ") </p>" 
     }); 
     $("#data").append(you_html); //// For Append 
     $("#mydiv").html(your_html) //// For replace with previous one 
    }, 
    error: function() { 
     console.log(data); 
    } 
});