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 :)
Route::post('blog/articles', 'App\Http\Controllers\BlogController@articles');
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 }}"); 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) ); } } } @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> @endforeachTienes este error porque tienes un problema en tu URL.
function getBlogLists(category_id) { var category_id = category_id; $.ajax({ url: "{{ url('blog/articles') }}", Aquí, la url es literalmente {{ url('blog/articles') }} , es decir, como una cadena.
Está enviando la solicitud a http://test.loc/{{ url('blog/articles') }} , que una vez codificada da http://test.loc/%7B%7B%20url('blog/articles')%20%7D%7D .
Por eso te sale un error 404 (no encontrado), obviamente esta url no existe.
Primero, elimine la variabilización de URL:
function getBlogLists(category_id) { var category_id = category_id; $.ajax({ url: "http://test.loc/blog/articles", //or whatever your url is Luego, en su controlador, solo tiene que devolver el HTML y estará dentro de data en su devolución de llamada success de javascript.
Haz una prueba simple primero:
public function articles() { return "<h1>HelloWorld</h1>"; }Si funciona con este simple "hola mundo", también funcionará con la vista que está representando.