laravel ajax过滤器由无线电发布

Question

我正在尝试使用单选按钮制作Ajax post过滤器。这样用户就可以使用单选按钮筛选两个已发布的产品。

这是我使用的代码:

category.blade.php

<div class="card mb-3">
<div class="card-header">{{ __('Published') }}</div>
<div class="card-body">
<div class="form-check">
<input class="form-check-input published_filter" type="radio" name="published" id="yes">
<label class="form-check-label" for="yes">
Yes
</label>
</div>
<div class="form-check">
<input class="form-check-input published_filter" type="radio" name="published" id="no">
<label class="form-check-label" for="no">
No
</label>
</div>
</div>
</div>

脚本

$(".published_filter").change(function() {
if(this.checked) {
publish.push($(this).val());
//I am checked
}else{
//I'm not checked
publish.splice(publish.indexOf($(this).val()), 1)
}
filterProduct();
});

CategoryController.php

public function filter(Request $request)
{
$products = Product::query();
if($request->has('publish') && $request->publish === 1) {
$products->where('published', 1);
}
$products = $products->get();
return response()->json([
'status' => 'success',
'data' => $products,
]);
}

我在CategoryController

中添加了以下行

dd($request->publish);

当我点击Yes时，我在网络选项卡中看到这个显示。

当我点击No时，我在网络选项卡中看到这个显示。

我不确定如何解决它。所以我希望有人能帮助我。我很少有AJAX的经验，这就是为什么我寻求帮助。

Answer 1

我不确定你想要实现什么，但根据你的例子，我假设你只想发送所有的无线电选项，其中选择是?

var publish = []
$(".published_filter").change(function() {
if ($(this).attr('id') === 'yes') {
publish.push($(this).is(':checked'));
//I am checked
} else {
//I'm not checked
publish.splice(publish.indexOf($(this).is(':checked')), 1)
}
console.log(publish)
// filterProduct();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card mb-3">
<div class="card-header">{{ __('Published') }}</div>
<div class="card-body">
<div class="form-check">
<input class="form-check-input published_filter" type="radio" name="published" id="yes">
<label class="form-check-label" for="yes">
Yes
</label>
</div>
<div class="form-check">
<input class="form-check-input published_filter" type="radio" name="published" id="no">
<label class="form-check-label" for="no">
No
</label>
</div>
</div>
</div>

我希望这对你有帮助