Laravel AJAX GET 并显示新数据

Posted 2023-03-15

【中文标题】Laravel AJAX GET 并显示新数据

【英文标题】：Laravel AJAX GET and show new data

【发布时间】：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

【参考方案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);
        
    );