Laravel Ajax 使用循环显示数据答案

【问题标题】：Laravel Ajax displaying Data using loopingLaravel Ajax 使用循环显示数据
【发布时间】：2016-11-16 08:23:25
【问题描述】：

我想在单击搜索按钮时显示数据。

到目前为止的搜索按钮表单代码：

<div class="col-xs-4 col-sm-4 col-md-4">
 <div class="form-group">
    <label class="control-label">Driver Name:</label>
    {!! Form::select('driver_id', $driver, null, array('class' => 'form-control')) !!}
 </div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4">
 <div class="form-group">
    <label>Fine Date:</label>
    {!! Form::text('fine_date', null, array('id' => 'datetimepicker', 'class' => 'form-control')) !!}
 </div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4">
 <div class="form-group filter-btn">
    <button class='btn btn-info' type='search'>Search</button>
 </div>
</div>

到目前为止，这是我的控制器：

public function getDriverByWorkingDate(Request $request) {
return Attendance::join('attendance_details', 'attendance_details.attendance_id', '=', 'attendances.id')
                        ->join('fleets', 'fleets.attendance_detail_id', '=', 'attendance_details.id')
                        ->join('cars', 'fleets.car_id', '=', 'cars.id')
                        ->select(
                            'fleets.start_time',
                            'fleets.end_time', 
                            'fleets.car_id', 
                            'cars.plate_no',
                            'attendances.working_date',
                            'attendances.driver_id'
                        )
                        ->where('attendances.working_date', Carbon::parse($request->fine_date))
                        ->where('attendances.driver_id', $request->driver_id)->get();
}

到目前为止，这里是 jquery：

$('button[type="search"]').click(function(e) {
    $.ajax({
        url: "{{ route('driver.name') }}",
        type: "POST",
        data: { 
            '_token' : '{{csrf_token() }}',
            'driver_id' : $('select[name="driver_id"]').val(),
            'fine_date' : $('input[name="fine_date"]').val(),
        },
        success: function(data) {
        },
        error: function(data) {

        } 
    });  
});

一切正常，正在返回数据。

#attributes: array:6 [
    "start_time" => "2016-11-16 08:00:00"
    "end_time" => "2016-11-16 18:00:00"
    "car_id" => 5
    "plate_no" => "DFE82846J"
    "working_date" => "2016-11-16"
    "driver_id" => 1
  ]
  #original: array:6 [
    "start_time" => "2016-11-16 08:00:00"
    "end_time" => "2016-11-16 18:00:00"
    "car_id" => 5
    "plate_no" => "DFE82846J"
    "working_date" => "2016-11-16"
    "driver_id" => 1
  ]

如何将这些数据显示到 HTML div 中？谢谢，

【问题讨论】：

Displaying data when pressed button laravel的可能重复

标签： javascript php jquery ajax laravel

【解决方案1】：

创建一个 div 并附加 json 结果

success: function(data) {
    $.each(data, function (i, item) {trHTML += '<tr><td>' + data.car_id + '</td><td>' + data.plate_no + '</td></tr>';}$('#test').append(trHTML);   
},

【讨论】：

【解决方案2】：

您需要将json response 传递给ajax 回调。

试试这个：

public function getDriverByWorkingDate(Request $request) {
    $attendances = Attendance::join('attendance_details', 'attendance_details.attendance_id', '=', 'attendances.id')
        ->join('fleets', 'fleets.attendance_detail_id', '=', 'attendance_details.id')
        ->join('cars', 'fleets.car_id', '=', 'cars.id')
        ->select(
            'fleets.start_time',
            'fleets.end_time', 
            'fleets.car_id', 
            'cars.plate_no',
            'attendances.working_date',
            'attendances.driver_id'
        )
        ->where('attendances.working_date', Carbon::parse($request->fine_date))
        ->where('attendances.driver_id', $request->driver_id)
        ->get();

    return response()->json([
        'status' => true,
        'attendances' => $attendances
    ], 200);
}

Ajax 成功：

success: function(data) {
    if(data.status == true) {
        $.each(data.attendances, function(i, v) {
            // do something

            console.log(v.start_time);
            console.log(v.end_time);
        });

    }
},

【讨论】：

这是对你的防御。在 HTML 中创建一个 div 并在迭代后将数据附加到 HTML 中。
你能帮我把它附加到htlm吗？
例如。在每个创建一个var temp = '<ul>'; 之前和每个temp += '<li>'+ v.start_time +'</li>'; 内部最后每个将temp var 附加到DOM 中，就像这样。 temp += '</ul>'; $('#list').html(temp);希望您了解它的工作原理。在您的 html 中创建一个 div，例如：<div id="list"></div>
我已经创建了
@AndrewVanusi 没问题，你可以创建任何你想要的名字。

【解决方案3】：

你可以使用js模板引擎（如：handlebarsjs）来解析解析数据并显示出来

或

使用传统方式：

在你的控制器中，使用这种方式：

public function getDriverByWorkingDate(Request $request) {
  $data =  Attendance::join('attendance_details', 'attendance_details.attendance_id', '=', 'attendances.id')
                    ->join('fleets', 'fleets.attendance_detail_id', '=', 'attendance_details.id')
                    ->join('cars', 'fleets.car_id', '=', 'cars.id')
                    ->select(
                        'fleets.start_time',
                        'fleets.end_time', 
                        'fleets.car_id', 
                        'cars.plate_no',
                        'attendances.working_date',
                        'attendances.driver_id'
                    )
                    ->where('attendances.working_date', Carbon::parse($request->fine_date))
                    ->where('attendances.driver_id', $request->driver_id)->get();

  return ['success' =>data]
}

在你的 jquery 代码中，试试这个方法：

success: function(data) {
  var customHtml = '';
  if(data.success){
    var response = data.success;
    for (var i in response) {
       customHtml = customHtml + '<div>'+ response[i].car_id+'</div>';
       customHtml = customHtml + '<div>'+ response[i].plate_no+'</div>';
       customHtml = customHtml + '<div>'+ response[i].start_time+'</div>';
       customHtml = customHtml + '<div>'+ response[i].end_time+'</div>';
    }

    $('.YOUR-AREA').html(customHtml)
  }
},

【讨论】：

你是什么意思？
这里的响应是一个对象