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

Posted 2023-05-08

【中文标题】使用 jquery-Ajax 在 html 表中显示 laravel 返回结果

【英文标题】：Display laravel retrun result in html table using jquery- Ajax

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

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