Laravel AJAX GET並顯示新數據

我一直在做一個項目，到目前爲止我已經能夠使用AJAX POST到數據庫，所以當用戶提交數據時頁面不會刷新，但數據仍然上傳到數據庫。Laravel AJAX GET並顯示新數據

現在我想要做的是向用戶顯示這些結果，而無需刷新頁面。我花了很多時間試圖弄清楚，但現在我很困難。任何人都可以將我指向正確的方向嗎？我已閱讀網站上的文檔，觀看了幾個小時的視頻，但仍然沒有運氣。

我到目前爲止的代碼。

腳本

$.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

來源

2017-10-04 WhoIsMostash

你想如何使用json數據結果到$（「＃data」）？在這裏你需要一些JS的邏輯或者你可以使用VUE.js – Webdesigner

@Webdesigner我想用Javascript來追加數據，但我也有一個使用csrf_field（）和方法delete的刪除按鈕。我不確定如何以保留刪除功能的方式實現它。而且，數據實際上並未被追加。該部分不工作，並且控制檯顯示沒有錯誤 – WhoIsMostash

刪除功能如何將數據附加到頁面上？如果你從你的Laravel獲得正確的json數據，而你的ajax需要的不僅僅是Laravel，也不僅僅是JS和jQuery – Webdesigner

解決了這個問題。

 $.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); 
     } 
    });

來源

2017-10-05 11:24:29 WhoIsMostash

這裏是y的溶液ou問題

$.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); 
    } 
});

來源

2017-10-05 05:57:45

Laravel AJAX GET並顯示新數據

回答

相關問題