javascript - Laravel 使用 QueryBuilder 时如何避免页面重新加载
问题描述
在我的laravel
-application 中,我使用spatie/laravel-query-builder
来按某些类别过滤工作列表。
所以我的代码现在看起来像这样:
我的控制器:
public function index(Request $request) {
$regions = Region::all();
$jobtypes = JobType::all();
$industries = Industry::all();
$jobs = QueryBuilder::for(Job::class)
->allowedFilters([
AllowedFilter::exact('region', 'region_id'),
AllowedFilter::exact('jobtype', 'job_type_id'),
AllowedFilter::exact('industry', 'industry_id')
])
->get();
return view('job.index', compact('jobs', 'regions', 'jobtypes', 'industries'));
}
我的刀片视图:
<form method="GET" id="jobfilter-form" enctype="multipart/form-data" content="{{ csrf_token() }}">
<div>
<p>Location</p>
@foreach ($regions as $region)
<label for="{{$region->id}}">
<input type="checkbox" class="chk-filter" name="region" value="{{$region->id}}" />
@if (in_array($region->id, explode(',', request()->input('filter.region'))))
checked
@endif
{{$region->name}}
</label>
@endforeach
</div>
<div>
<p>Job type</p>
@foreach ($jobtypes as $jobtype)
<label for="{{$jobtype->id}}">
<input type="checkbox" class="chk-filter" name="jobtype" value="{{$jobtype->id}}" />
@if (in_array($jobtype->id, explode(',', request()->input('filter.jobtype'))))
checked
@endif
{{$jobtype->name}}
</label>
@endforeach
</div>
<div>
<p>Industry</p>
@foreach ($industries as $industry)
<label for="{{$industry->id}}">
<input type="checkbox" class="chk-filter" name="industry" value="{{$industry->id}}" />
@if (in_array($industry->id, explode(',', request()->input('filter.industry'))))
checked
@endif
{{$industry->name}}
</label>
@endforeach
</div>
<div>
<button type="submit" id="filter">filter</button>
</div>
</form>
最后是javascript:
function getIds(checkboxName) {
let checkBoxes = document.getElementsByName(checkboxName);
let ids = Array.prototype.slice
.call(checkBoxes)
.filter(ch => ch.checked == true)
.map(ch => ch.value);
return ids;
}
function filterResults() {
let regionIds = getIds("region");
let jobtypeIds = getIds("jobtype");
let industryIds = getIds("industry");
let href = "filter?";
if (regionIds.length) {
href += "filter[region_id]=" + regionIds;
}
if (jobtypeIds.length) {
href += "&filter[job_type_id]=" + jobtypeIds;
}
if (industryIds.length) {
href += "&filter[industry_id]=" + industryIds;
}
document.location.href = href;
}
$("#jobfilter-form #filter").on("click", e => {
filterResults();
});
这基本上可以正常工作,但是此解决方案(当然)每次单击提交按钮时都会重新加载页面,并且还会取消选中所有先前选中的复选框。
所以我的问题是:我可以避免页面被重新加载吗?以及如何保留选中的复选框?
另一件事是,我正在考虑使用这样的东西:
$(".chk-filter").on("change", function() {
if (this.checked) {
$('#jobfilter-form button[type="submit"]').click();
}
});
并隐藏提交按钮。
有人可以帮我吗?
解决方案
当您更新 URL 并使其导航时,这可能会重新加载页面。最好添加一个额外的路由,它接受这些参数并返回 JSON。然后,您可以将您的 web 1.0 样式转换为动态表单,该表单使用 XHR 获取,然后相应地操作 DOM。CSRF 令牌需要与 XHR一起传递- 但通常不需要表单,因为 JS 会获取 JSON 并更新 DOM(这将是显示结果的区域)。从不提交任何表单时,页面不会重新加载,复选框将保持原样。
推荐阅读
- python - 为什么我不能在课堂外使用 __repr__ 数据
- c# - 如何在datagridview中检查单击单元格的列名
- c# - 为什么我的 C# WinForms 窗口没有响应 Enter 键而关闭?
- java - 查找多个输入数组的总和
- java - 如何在其他配置中重用 Maven 配置 XML 片段
- python - asyncio 方法不异步执行
- sql - 通过 API 进行数据库同步 - Postgresql
- javascript - Magento 2.4.1:未捕获的错误:Object 处的 [object Object]。
(default.js:847) - angular - 在同一个组件中使用 2 个发射器是不可能的
- sql-server - 如何在不使用函数的情况下使用 MS SQL 查询查找在文本中定义的硬编码值