如何在JavaScript中调用Laravel路由获取JSON数据生成动态表格

你可以直接在JS函数中通过网络请求调用Laravel定义的/returnJSON接口获取数据，以下是具体修改方式：

方法1：使用原生Fetch API（无额外依赖，推荐） #

直接修改你的CreateTableFromJSON函数，加入请求逻辑：

async function CreateTableFromJSON() {
    try {
        // 调用Laravel接口获取JSON数据
        const response = await fetch('/returnJSON');
        if (!response.ok) {
            throw new Error('接口请求失败');
        }
        // 把响应转为JS数组，赋值给registroCarros
        const registroCarros = await response.json();

        // 下面是你原来的表格生成逻辑，不需要修改
        // EXTRAI VALOR PARA O HEADER HTML 
        var col = [];
        for (var i = 0; i < registroCarros.length; i++) {
            for (var key in registroCarros[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE TABLE 
        var table = document.createElement("table");
        table.id = 'myTable';

        var tr = table.insertRow(-1);                   //ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      //HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // 提示：你原有这段代码存在问题，getElementsByTagName返回的是元素集合，不能直接给集合设置id，有对应需求可以自行调整
        // for (var i = 0; i < col.length; i++) {
        //    var td1 = document.getElementsByTagName("tr");      
        //    td1.id="teste;"
        // }

        // ADD JSON IN TABLE AS ROWS.
        for (var i = 0; i < registroCarros.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = registroCarros[i][col[j]];
            }
        }

        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    } catch (error) {
        console.error('获取数据出错:', error);
    }
}

方法2：如果项目已经引入jQuery，可以用$.get实现 #

function CreateTableFromJSON() {
    $.get('/returnJSON', function(registroCarros) {
        // 此处保留你原来的表格生成逻辑即可，registroCarros已经是接口返回的数组
        // ......原有逻辑不变
    }).fail(function(error) {
        console.error('请求失败', error);
    })
}

注意事项 #

如果你的Laravel项目不是部署在域名根路径，需要把请求地址换成完整路径，或者在Blade模板中用路由别名生成地址。另外你原路由定义的别名参数有误，正确写法如下：

Route::get('returnJSON', 'App\Http\Controllers\Controller@returnJSON')->name('returnJSON');

修改后如果是在Blade模板里写JS，可以直接把请求地址写成{{ route('returnJSON') }}，不需要手动拼接路径。

内容的提问来源于stack exchange，提问作者Dan