在 JavaScript 中使用 Laravel 路由？

Question

我有一个返回 JSON 的 Laravel 路由，我有一个 JS 文件，它可以动态生成一个表格，其中包含 JSON 中的结果。 我只需要在我的 JS 表中使用这个 JSON。就是这样。

JS 代码（registroCarros 应该从 JSON、路由等接收值）

function CreateTableFromJSON() {
    

    var registroCarros = []

    // 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);
    }

    for (var i = 0; i < col.length; i++) {
       var td1 = document.getElementsByTagName("tr");      //HEADER.
       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);


    
}

我的控制器（dbtest 是我的模型中使用 SELECT 的函数）：

 public function returnJSON()
    {
        $teste   = new user();
        return response()->json(($teste->dbtest()));
        
    }

还有我的路线：

Route::get('returnJSON', 'App\Http\Controllers\Controller@returnJSON',           ['names' => 'returnJSON']);

我只需要在我的 JavaScript 中使用这个路由。

Answer 1

您的控制者

public function returnJSON()
{
    $teste = new user();
    return response()->json($teste->dbtest());    
}

那么你的路线应该是这样的：

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

那么最后在你的blade文件（JS代码）中，你可以把它当作：

// behind any event (e.g. button click or value change etc.)
fetch("{{ route('returnJSON') }}")       // This is the route name given in your route
// OR fetch("{{ url('returnJSON') }}")   // and this is the URL (either can be used)
.then(res => res.json())
.then(data => CreateTableFromJSON(data));

/* ?REMEMBER */
// Your "CreateTableFromJSON" function must require an argument
// so that it can take the response (returned JSON) in it    
function CreateTableFromJSON(registroCarros = []) {
    // 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);
    }

    for (var i = 0; i < col.length; i++) {
    var td1 = document.getElementsByTagName("tr");        //HEADER.
    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);    
}

注意
此 JS 代码必须在您的刀片文件中，否则您必须将确切的 URL 放入 fetch 中，例如：fetch('xyz.com/returnJSON')

---

还要验证控制器和模型是否工作正常以及您是否获得了正确的数据。你可以这样做：

任一控制器：

public function returnJSON()
{
    $teste = new user();
    $data = $teste->dbtest();
    dd($data);    // HERE

    return response()->json($data);    
}

或 JS（在 'CreateTableFromJSON' 函数的开头）：

function CreateTableFromJSON(registroCarros = []) {
    console.log(registroCarros);    // HERE

    ...
}

Answer 2

试试这个：

fetch('{{ route('returnJSON') }}')
    .then((res) => res.json())
    .then( data => CreateTableFromJSON(data))

并删除函数内部的空数组

function CreateTableFromJSON(registroCarros) {
  //var registroCarros = [] remove this line

改变路线：

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

Answer 3

所以，如果我正确理解了您的代码，那么缺少的部分就是您如何获取远程数据的问题。这就是你的做法：

fetch('returnJSON')
    .then((res) => res.json())
    .then(CreateTableFromJSON)

function CreateTableFromJSON(registroCarros) {
    // ...