我正在尝试构建一个手风琴,其中列出了所有主要类别,当用户单击其中一个类别时,它应该展开以显示所有子类别。我有很多类别,每个类别还有很多子类别。因此,我认为解决方案可能是当用户单击菜单项以检索所有子类别时发送 AJAX 请求。这种方法确保链接不会使 DOM 过载,这对我来说至关重要。
为此,我想使用 AlpineAJAX,但我无法使其正常工作。
<li x-init @click="$ajax('/subCategories/{{$product->page_id}}', { target: 'subCategories' })">
<a href="#">{{$mainCategory->name}}
<i class="fa fa-angle-right"></i>
<span class="expand"></span>
</a>
<ul id="subCategories"></ul>
</li>
在我的示例中,当用户单击主类别标签时,将发送 AJAX 请求并收到响应。然而,目标元素并没有被更新,而是消失了。我正在努力弄清楚为什么会发生这种情况。
我的路线:
Route::get('/subCategories/{product}', function (Product $product) {
$view = view('helloWorld')->render();
return response()->json(['subCategories' => $view]);
});
回复:
{
"subCategories": "<html>\n<body>\n<h1>Hello<\/h1>\n<\/body>\n<\/html>\n"
}
我认为错误来自于我没有正确构建响应,但我找不到 Laravel 的示例,任何帮助将不胜感激
响应必须是一个简单的 HTML 字符串,用于替换 target
对于你的情况:
你好
您可以从控制器返回该 HTML 字符串:
return "<ul id=\"subCategories\"><h1>Hello</h1>\n</ul>\n";
或者更好的是包含相同 HTML 的视图:
return view('hello');
查看hello.blade.php:
<ul id="subCategories">
<h1>Hello!!</h1>
</ul>