发布 Laravel JSON Jquery 显示数据

Question

我正在尝试在表格上显示数据 json 的帖子

脚本

$('select#mes').on('change',function(){
 var valor = $(this).val();
 var route = "http://localhost/UJOBB/public/ADIC/ListaM";
 var token = document.getElementById('token').getAttribute('content')


if(valor != null){

    $.ajax({
    url: route,
    headers: {'X-CSRF-TOKEN': token},
    type: 'POST',
    dataType: 'json',
    data:{mes: valor},
            success: function(data) {

            },
            error: function() {

            }
        });
 } else {
 }
});

路线

Route::post('ADIC/ListaM', 'ADICController@ListaM');

控制器

   public function ListaM(Request $request){
    $mes = $request->input('mes');
    $users = DB::table('ADIC')
        ->where('mes', $mes)
        ->orderBy('id')
        ->get();

    return response()->json([
    'datos'=>$users
        ]);
}

查看

<div id="mesPage">
 <div>{!!Form::label('mes','Mes: ')!!}
    <select name="mes" id="mes">
        <option value='null'>- choose -</option>
        <option value="Ene">Enero</option>
        <option value="Feb">Febrero</option>
        <option value="Mar">Marzo</option>
        <option value="Abr">Abril</option>
        <option value="May">Mayo</option>
        <option value="Jun">Junio</option>
        <option value="Jul">Julio</option>
        <option value="Ago">Agosto</option>
        <option value="Set">Setiembre</option>
        <option value="Oct">Octubre</option>
        <option value="Nov">Noviembre</option>
        <option value="Dic">Diciembre</option>
    </select>
</div>
<table class="table table-striped table-hover">
    <thead>
        <th>Fecha</th>
        <th>Cancha</th>
        <th>Partido</th>
        <th>Juez - 1</th>
        <th>Juez - 2</th>
        <th>Estado</th>
    </thead>

    <tbody>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>
</div>

这不是问题，一切正常， JSON 的答案是正确的...

但是我不能在表格中显示数据

Answer 1

使用ID 标识您的表：

<table class="table table-striped table-hover" id="dataTable">
    <thead>
        <th>Fecha</th>
        <th>Cancha</th>
        <th>Partido</th>
        <th>Juez - 1</th>
        <th>Juez - 2</th>
        <th>Estado</th>
    </thead>
    <tbody>

    </tbody>
</table>

在您的 ajax 中循环遍历数据并附加到视图中：

success: function(data) {
    var dataView = $('#dataTable tbody');
    dataView.empty();
    for (dataRow in data.datos) {
        dataView.append('<tr><td>' 
                        + dataRow.variable1
                        + '</td><td>'
                        + dataRow.variable2
                        + '</td><td>'
                        + dataRow.variable3
                        + '</td><td>'
                        + dataRow.variable4
                        + '</td><td>'
                        + dataRow.variable5
                        + '</td><td>'
                        + dataRow.variable6
                        + '</td></tr>');
    }
},

将 variable1 - variable6 名称替换为您的数据库字段名称