使用Laravel进行AJAX GET请求并展示新数据

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

- WhoIsMostash

---

你想如何将json数据结果附加到$("#data")？这里你需要一些JS逻辑或者可以使用VUE.js。 - Webdesigner

@Webdesigner 我想使用JavaScript来追加数据，但我还有一个使用csrf_field()和delete方法的删除按钮。我不确定如何以这样的方式实现它，以保持删除功能。此外，数据实际上并没有被追加。那部分不起作用，控制台也没有显示任何错误。 - WhoIsMostash

删除函数与将数据附加到页面有什么关系？如果您使用ajax请求从Laravel获取正确的json数据，则这不是Laravel或Ajax问题，只涉及JS和jQuery。 - Webdesigner

Answer 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);
    }
});

- M Arfan

Answer 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);
        }
    });

- WhoIsMostash