在 javascript 中使用 Laravel 路由？

Question

我有一个返回 JSON 的 Laravel 路由，我有一个动态生成 table 的 JS 文件，结果在 JSON 中。我只需要在我的 JS table 中使用这个 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

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

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

function CreateTableFromJSON(registroCarros) {
    // ...

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

您的控制器

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 代码必须在你的 blade 文件中，否则你必须在 fetch 中输入精确的 URL，比如：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

    ...
}

在 javascript 中使用 Laravel 路由？

Use Laravel route in javascript?

javascript

php

laravel

laravel-routing