Вот мое затруднение: мне нужно обработать ответ json, полученный от метода контроллера. Я делаю это, вызывая клик на элементе панели навигации «Список статей», который активирует метод ajaxIndex (). Затем метод tat делает запрос на маршрутизацию, которая, в свою очередь, вызывает метод контроллера, также называемый ajaxIndex (). Этот метод затем собирает все статьи и отправляет его в ответ. После этого, тот ответ, который я не могу контролировать, он просто делает сырой JSON ...
Элемент Navbar:
<a class="nav-link" href="/articles" onclick="ajaxIndex(this)"> List Articles </a>
Маршрут:
Route::get('/articles', "ArticlesController@ajaxIndex");
Метод в ArticlesController
public function ajaxIndex(Request $request)
{
$var1 = $request->var1;
$var2 = $request->var2;
$elem = $request->elem;
$currUser = auth()->user();
$currUri = Route::getFacadeRoot()->current()->uri();
$articles = Article::orderBy("created_at","desc")->paginate(5);
$html = view('articles.List Articles')->with(compact("articles", "var1", "var2", "elem", "currUser", "currUri"))->render();
//return $request;
return response()->json(["success"=> true, "html" => $html], 200);
//return response()->json(["success"=> $articles,"var1"=> $var1, "var2"=> $var2, "elem"=> $elem, "currUser" => $currUser, "currUri" => $currUri], 200);
}
и вот мой метод ajax
function ajaxIndex(me,formId){
let var1 = "gg";
let var2 = "bruh";
let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let url = "/articles";
if(formId){
let form = $("#"+formId).serialize();
console.log(form);
}
$.ajax({
type: "GET",
url: url,
headers:{
"X-CSRF-TOKEN": token
},
data: {/*
var1: var1,
var2: var2,
elem: {
id: me.id ? me.id : null,
class: me.className ? me.className : null,
value: me.value ? me.value : null,
innerHTML: me.innerHTML ? me.innerHTML : null,
}
*/},
success: (data) => {
console.log(data);
$('#maine').html(JSON.parse(data.html));
},
error: (data) => {
console.log(data);
}
});
}
Как визуализировать полученные данные для определенного вида?
Теперь просто отображает ответ JSON наряду с HTML.
Мой вопрос, как сделать сам ответ и куда идет ответ от метода контроллера. Я пробовал консоль, входя в систему при попадании в маршрут, но в консоли ничего нет. Каков реальный подход или что мне нужно изменить, чтобы достичь этого?
Приложение:"Для Список статей вы отправите запрос ajax в остальные API, где он возвращает массив объектов (статей)". Я предположил, что мне нужно сделать ajax-запрос, после отправки на соответствующий блейд, теперь я должен отображать отправленные данные? Я что-то не так делаю? ...
Edit1:
Теперь, когда я захожу на любую страницу в моем приложении, например:
http://articleapp.test/articles?page=2
показывает ответ json:
Edit2:
Я также изменил свой метод ajax для правильного отображения текущей страницы для списка статей. Проблема начинается при попытке перейти на следующую страницу.
Вот код:
function ajaxIndex(me,formId){
let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let url = "/articles";
if(formId){
let form = $("#"+formId).serialize();
console.log(form);
}
$.ajax({
type: "GET",
url: url,
headers:{
"X-CSRF-TOKEN": token
},
data: {},
success: (data) => {
console.log(data);
let html = "<div class='container'>";
let articleBody = "";
let pagination = "<ul class='pagination'><li class='page-item'><a class='page-link' href='#'>Previous</a></li>";
if(data.articles.data.length > 0){
for(let i=0;i<data.articles.current_page;i++){
let created_at = data.articles.data[i].created_at.replace(/-/g,"/").split(" ")[0];
html += "<div class='row' style='background-color: whitesmoke;'><div class='col-md-4 col-sm-4'><a href='/articles/"+data.articles.data[i].id+"'><img class='postCover postCoverIndex' src='/storage/images/"+data.articles.data[i].image+"'></a></div><div class='col-md-8 col-sm-8'><br>";
if(data.articles.data[i].body.length > 400){
articleBody = data.articles.data[i].body.substring(0, 400);
html += "<p>"+articleBody+"<a href='/articles/"+data.articles.data[i].id+"'>...Read more</a></p>";
}
else{
html += "<p>"+data.articles.data[i].body+"</p>";
}
html += "<small class='timestamp'>Written on "+created_at+" by "+data.articles.data[i].user.name+"</small></div></div><hr class='hrStyle'></hr>";
history.pushState(null, null, "/articles?page="+(i+1));
}
for(let i=0;i<data.articles.total;i++){
//console.log(data.articles.data[i].id);
pagination += "<li class='page-item'><a class='page-link' href='/articles?page="+(i+1)+"'>"+(i+1)+"</a></li>";
}
pagination += "<li class='page-item'><a class='page-link' href='#'>Next</a></li></ul>";
}
html+="<div class='d-flex' style='margin: 10px 0px;padding-top: 20px;'><div class='mx-auto' style='line-height: 10px;'>"+pagination+"</div></div></div>";
$('#maine').html(html);
//?page=2
},
error: (data) => {
console.log(data);
}
});
}
Когда я перехожу на следующую страницу, он показывает ответ json, как я уже говорил ранее. Посмотрите на изображение выше. Это не будет отображаться ...