ajax - 如何使用 AJAX 将数据从控制器传递到视图
问题描述
我想显示一个数据控制器以使用 ajax 进行查看,并且我已经显示了一个数据控制器以在没有 ajax 的情况下在图表栏上查看我需要使用 ajax 在图表栏上获取数据,但我不知道如何显示数据在使用 ajax 的图表栏上。
我在 JSON/AJAX/Laravel 方面没有那么好的经验,我是初学者。
控制器
public function index()
{
$manager_hourlog = Hourlog::with('project', "user")->get()-
>groupBy('project.name');
$projects = [];
$totals = [];
foreach ($manager_hourlog as $key => $val) {
$projects[] = $key;
}
foreach ($manager_hourlog as $key2 => $val) {
$minutes = $val->sum('hour_work');
$totals[] = round($minutes / 60, 1);
}
$users = User::where("status", 1)->get();
$data = [
// manager report
'manager_projects' => $projects,
'totals' => $totals,
"manager_hourlog" => $manager_hourlog,
"auth" => $auth,
];
return response()->json(['data' => $data]);
return view('cms.dashboard', $data);
}
脚本
<script>
// Employee report script
var colors = ["#1abc9c", "#2ecc71", "#3498db",
"#9b59b6", "#34495e", "#16a085", "#27ae60"];
@if ($auth->user_type != 1)
// manager report script
var managerchartbar = {
labels: {!! json_encode($manager_projects) !!},
datasets: [
@foreach($users as $user)
{
label: {!! json_encode($user->name) !!},
backgroundColor: colors[Math.floor(Math.random() * colors.length)],
// data: [300,200,500,700]
data: [
@foreach($manager_hourlog as $hourlog)
{{$hourlog->where("user_id", $user->id)->sum("hour_work") / 60}},
@endforeach
]
},
@endforeach
]
};
var ctx = document.getElementById('manager').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: managerchartbar,
options: {
title: {
display: true,
text: 'Employees Report chart'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
@endif
阿贾克斯
$.ajax({
type: 'GET',
url: '{{url("/dashboard")}}',
data: {
data: data
},
success: function(data){
console.log(data.data);
},
error: function(xhr){
console.log(xhr.responseText);
}
});
</script>
html视图
<div class="col-md-12">
<div class="card-box">
<div class="container-fluid">
<canvas id="manager" height="100">
</canvas>
</div>
</br>
</div>
</div>
路线
Route::get('/dashboard',
'DashboardController@index')->name('dashboard');
解决方案
推荐阅读
- javascript - 在自定义日期开始计时器
- sql - 如何通过匹配将日期从一行复制到另一行(SCD 类型 2)
- java - 如何在数组列表java spring中获取最大值
- c# - 如何将位图的字节数组发送到图像处理的主页?
- apache-kafka - 本地设置的“SchemaRegistryException:无法获取 Kafka 集群 ID”
- azure-keyvault - 准入 webhook 错误:无法获取自动 cmd,错误:未找到秘密“pullsecret”
- python - 将用户分配给 JIRA 中的多个组
- windows - 在 cmd.exe 启动时隐藏前几行?
- python - 如何根据所选数字显示文本字段?
- vue.js - VueJs 应用程序未在生产中的某些设备上更新