Laravel AJAX GET 并显示新数据答案

【问题标题】：Laravel AJAX GET and show new dataLaravel AJAX GET 并显示新数据
【发布时间】：2018-03-16 11:58:38
【问题描述】：

我一直在做一个项目，到目前为止，我已经能够使用 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

【问题讨论】：

您希望如何将 json 数据结果转换为 $("#data") ？在这里你需要一些 JS 中的逻辑或者你可以使用 VUE.js
@Webdesigner 我想使用 Javascript 来追加数据，但我也有一个使用 csrf_field() 和方法 delete 的删除按钮。我不确定如何以保留删除功能的方式实现它。此外，实际上并未附加数据。该部分不工作，控制台显示没有错误
删除功能与将数据附加到您的页面有什么关系？如果您使用 ajax 请求从 Laravel 获得正确的 json 数据，那么这不是 Laravel 也不是 Ajax 问题，只是 JS 和 jQuery

标签： json ajax laravel get

【解决方案1】：

这里是你的问题的解决方案

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

【讨论】：

【解决方案2】：

这解决了问题。

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

【讨论】：