Tengo 0 experiencia en Ajax, y ahora estoy tratando de obtener una tabla html para regresar en una llamada ajax.

Como resultado, me sale el error

jquery-3.6.0.min.js:2 POST http://test.loc/%7B%7B%20url('blog/articles')%20%7D%7D 404 (Not Found)

Entiendo que todavía hay muchos errores, así que no juzgues demasiado y ayuda en lo que puedas :)

Ruta:

Route::post('blog/articles', 'App\Http\Controllers\BlogController@articles');

Ajax en la página de llamadas:

 function getBlogLists(category_id) { var category_id = category_id; $.ajax({ url: "{{ url('blog/articles') }}", type: 'POST', data: { 'category_id': category_id }, datatype: 'html', success: function(data) { console.log('success'); console.log(data); document.querySelectorAll('.blog-filter__item').forEach(el => { el.addEventListener('click', () => { document .querySelector('.blog-filter__item.active') .classList.remove('active'); el.classList.add('active'); var dataFilter = $(el).attr('data-filter'); if (dataFilter == 'all') { $('.blog-list').show(); } else { $('.blog-list').hide() $(dataFilter).show() } }); }); }, }); } //on page load getBlogLists("{{ $category->id }}");

Controlador:

 public function articles() { $input = Request::all(); if(Request::isMethod('post') && Request::ajax()) { if($input['category_id']) { $articles = Article::select('select * from blog_categories where blog_category_id = ?', array($input['category_id'])); $returnHTML = view('blog.articles')->with('articles', $articles)->render(); return response()->json( array('success', 'html'=>$returnHTML) ); } } }

Vista:

 @foreach($articles as $index => $article) <div class="blog-list category_{{ $article->blog_category_id }}"> @if ($index % 2 === 1) <div class="blog-article blog-article--right"> <h2 class="blog-article_title">{{ $article->title }}</h2> </div> @else <div class="blog-article blog-article--left"> <h2 class="blog-article_title">{{ $article->title }}</h2> </div> @endif </div> @endforeach