Json Laravel AJAX获取并显示新数据

我一直在做一个项目，到目前为止，我已经能够使用AJAX发布到数据库，因此当用户提交数据时，页面不会刷新，但数据仍然上传到数据库

现在我想做的是，向用户显示这些结果，而无需刷新页面。我花了很多时间想弄明白，但现在我被卡住了。谁能给我指一下正确的方向吗？我读了网站上的文档，看了几个小时的视频，但还是没有运气

到目前为止我掌握的代码

脚本

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

---

这是解决你这个问题的办法

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

$.ajax({
键入：“GET”，//这需要是GET
url:{{$video->id}}/shownew',，
成功：功能（数据）{
var obj=JSON.parse（数据）；
var your_html=“”；
$。每个（obj['getstamps'，函数（键，val）{
您的_html+=“我的值：+val+”
”
});
$（“#数据”）.append（you_html）；///用于append
$（“#mydiv”）.html（您的_html）///用于替换为上一个
},
错误：函数（）{
控制台日志（数据）；
}
});

这解决了这个问题

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

$.ajax({
键入：“GET”，//这需要是GET
url:{{$video->id}}/shownew',，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
container.html（“”）；
$。每个（数据、功能（索引、项目）{
container.html（“”）；//清除新数据的容器
$。每个（数据、功能（i、项）{
container.append（''+新日期（item.timestamp_time*1000）.toutString（）.match（/（\d\d:\d\d:\d\d）/）[0]+'-'+item.timestamp_name++''.{！！csrf_field（）！！}'+''；
});
container.append（“
”）；
});
}，错误：函数（）{
控制台日志（数据）；
}
});

您希望如何将json数据结果转换为$（“#数据”）？在这里，您需要JS中的一些逻辑，或者您可以使用VUE。js@Webdesigner我想使用Javascript来附加数据，但我还有一个delete按钮，它使用csrf_field（）和delete方法。我不确定如何以这种方式实现它以保持删除功能。而且，数据实际上并没有被追加。该部分不工作，并且控制台没有显示错误。删除功能与向页面添加数据有关吗？如果您通过ajax请求从Laravel获得正确的json数据，那么这不是Laravel，也不是ajax问题，只是JS和jQuery