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

你想如何使用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); 
     } 
    });

答

这里是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); 
    } 
});

Laravel AJAX GET并显示新数据

相关推荐