使用 jquery-Ajax 在 html 表中显示 laravel 返回结果答案

【问题标题】：Display laravel retrun result in html table using jquery- Ajax使用 jquery-Ajax 在 html 表中显示 laravel 返回结果
【发布时间】：2020-06-02 08:21:44
【问题描述】：

在 Laravel Blade 中我有一个搜索脚本

 <script type="text/javascript">
    $.ajax({
        type: "POST",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        url: "{{ URL::asset('upload-panel/search')}}",
        data: dataString,
        dataType:"JSON",
        cache: false,
        success: function(result) { 
        var FinalResult=result.CallDetails
        num_rows = result.length;
        console.log(result)


        },error:function(x,e) {
            setTimeout(function() {searchPhoneCalls();}, 2000);
        }
    })
</script>

控制器返回中的搜索功能如下

返回 json_encode($users);

在控制台中，我得到的结果是一个数组，如下所示

0: {Short_name: "GO120762", Date: "21-01-2020"}
1: {Short_name: "GO120764", Date: "21-01-2020"}
2: {Short_name: "GO120766", Date: "21-01-2020"}

我想在下面的 HTML 表格中显示这些结果

+----------+------------+
| Name     | Date       |
+----------+------------+
| GO120762 | 21-01-2020 |
+----------+------------+
| GO120764 | 21-01-2020 |
+----------+------------+
| GO120766 | 21-01-2020 |
+----------+------------+

【问题讨论】：

在刀片中使用 foreach 循环来解析来自控制器的数据。
怎么样？这就是我的问题@pr1nc3
来自文档：laravel.com/docs/5.3/blade#the-loop-variable
我在 ajax 结果中得到结果。如何将其传递给 laravel foreach 循环？ @Kusy

标签： php jquery ajax laravel laravel-5

【解决方案1】：

它与 Laravel 无关，它是纯 HTML / jQuery “问题”。

收到的 JSON 中不存在名为 CallDetails 的此类密钥

您可以在 HTML 中构建一个数组：

<table id="table-search"></table>

在你的 JS 中：

var $tableSearch = $('#table-search');
$tableSearch.html('');
//var FinalResult = result.CallDetails
result.forEach(function(row) {
    $tableSearch.append('<tr><td>'+ row.Short_name +'</td><td>'+ row.Date +'</td></tr>');
});

【讨论】：

显示未捕获的类型错误：无法读取未定义的属性“forEach”
@TestCheck 删除 var FinalResult=result.CallDetails 行并检查答案。例如var $tableSearch = $('#table-search'); $tableSearch.html(''); result.forEach(function(row) { $tableSearch.append('<tr><td>'+ row.Short_name +'</td><td>'+ row.Date +'</td></tr>'); });
Yssss 它的工作感谢@Vincent Decaux @ Ritesh Khandekar

【解决方案2】：

在你的刀片中：

<table>
    <thead>
        <th>Name</th>
        <th>Date</th>
    </thead>
    <tbody class="tbody">

    </tbody>
</table>

在 ajax 脚本中：

success: function(result) { 
    var FinalResult=result.CallDetails
    num_rows = result.length;
    console.log(result)

    $.each(FinalResult, function(index, value){
        $('tbody').append('<tr><td>'+value.Short_name+'</td><td>'+value.Date+'</td></tr>');
    });

 }

【讨论】：

仍然控制台返回值但表没有
@TestCheck 你能在刀片中添加表格 HTML 吗？
@RiteshKhandekar 这是控制台paste.pics/83M9H
@TestCheck 可以换成$('tbody').append('<tr><td>+value.Short_name+</td><td>+value.Date+</td></tr>');
@TestCheck 还在循环中添加控制台console.log(value.Short_name)。

【解决方案3】：

这样试试

success: function(result) {
 var tableSearch = $('#table-search');
 tableSearch.html('');

 $.each(result, function(index, value){
    tableSearch.append('<tr><td>'+value.Short_name+'</td><td>'+value.Date+'</td></tr>');
});
}

【讨论】：