Я довольно новичок в Laravel и теперь мне нужно реализовать функциональность ajax в моем проекте. Я понял, как отобразить статью и создать ее через ajax, проблема возникает, когда мне нужно перечислить их. И это имеет две подзадачи.
- Отображение постраничных статей, которые я сделал
- и вторая, которая переходит на следующую страницу с новым набором статей.
Я знаю, как это сделать с помощью пагинации в Laravel, но в этом случае нумерацию страниц также следует выполнять с помощью ajax.
Я получил некоторые данные, которые я взял из ArticlesController, который отправляет ответ json, который выглядит следующим образом:
{
status: "success", msg: "Hello!", articles: {…}, request: {…}}
articles:
current_page: 1
data: Array(1)
0: {id: 3, title: "Post1", body: "<p><strong>Lorem ipsum</strong> dolor sit amet, co…ctum. Duis feugiat facilisis lectus a cursus.</p>", created_at: "2019-06-18 00:23:25", updated_at: "2019-06-18 18:33:52", …}
length: 1
__proto__: Array(0)
first_page_url: "http://articleapp.test/postajax?page=1"
from: 1
last_page: 3
last_page_url: "http://articleapp.test/postajax?page=3"
next_page_url: "http://articleapp.test/postajax?page=2"
path: "http://articleapp.test/postajax"
per_page: 1
prev_page_url: null
to: 1
total: 3
__proto__: Object
msg: "Hello!"
request: {_token: "T31VK2FBVbIBG6IIOK4X4Q0r7WPTlzc7haXCwJrM", message: "bravo"}
status: "success"
__proto__: Object
}
Метод контроллера, который после получения вызова из функции ajax собирает данные и отправляет их обратно в виде ответа json. Одна часть этих данных - это нумерованные записи таблицы статей:
public function ajaks(Request $request){
if($request->ajax()){
$articles = Article::with('user')->paginate(1);
$response = array(
'status' => 'success',
'msg' => "Hello!",
"articles" => $articles,
"request" => $request->all(),
);
return response()->json($response);
}
}
Функция Ajax отправляет запрос по заданному маршруту вместе с токеном csrf и, в свою очередь, получает ответ. Из этого ответа он создает html, который впоследствии добавляется к конкретному div в моем макете. Ее функция ajax:
function ajaks(/*par*/){
let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
console.log("hit");
$.ajax({
url: '/postajax',
type: 'POST',
data: {_token: token , message: "bravo"},
dataType: 'JSON',
success: (response) => {
console.log("success");
console.log(response);
let body = "";
let html = "<div class='container'>";
let len = response.articles.data.length;
for(let i=0;i<len;i++){
html += "<div class='row' style='background-color: whitesmoke;'><div class='col-md-4 col-sm-4'><a href='/articles/"+response.articles.data[i].id+"'><img class='postCover postCoverIndex' src='/storage/images/"+response.articles.data[i].image+"'></a></div><div class='col-md-8 col-sm-8'><br>";
if(response.articles.data[i].body.length > 400){
body = response.articles.data[i].body.substring(0, 400)+"<a href='/articles/"+response.articles.data[i].id+"'>...Read more</a>";
}
else{
body = response.articles.data[i].body;
}
html += "<p>"+body+"</p>";
html += "<small class='timestamp'>Written on "+response.articles.data[i].created_at+" by "+response.articles.data[i].user.name+"</small></div></div><hr class='hrStyle'>";
}
let pagination = "<div class='container'><ul class='pagination justify-content-center'><li class='page-item'><a class='page-link' href='#'>Previous</a></li>";
for(let i=0;i<response.articles.last_page;i++){
pagination += "<li class='page-item'><a class='page-link' href='#'>"+(i+1)+"</a></li>";
}
pagination += "<li class='page-item'><a class='page-link' href='#'>Next</a></li></ul></div>";
//console.log(pagination);
html += "</div>"+"<form id='pagForm'>"+pagination+"</form>";
if(document.getElementById("maine")){
document.getElementById("maine").innerHTML = html;
}
},
error: (response) => {
console.log("error");
console.log(response);
}
});
}
И с этим я проверяю маршрут ajax и получаю первый набор статей:
<?php
if(Route::getFacadeRoot()->current()->uri()=="ajax"){
?>
<script>
$(document).ready(function(){
ajaks();
});
</script>
<?php
}
?>
это в моем макете лезвие. Кроме того, ссылки на страницы являются просто начальной загрузкой, это просто помогает мне визуализировать.
Мой вопрос, как я могу использовать это для нумерации страниц? Какой правильный подход для использования ajax, поскольку я не могу полагаться на встроенную нумерацию страниц Laravel для этого. Должен ли я прикрепить другую функцию ajax к ссылкам на нумерацию страниц, которая затем снова вызовет метод контроллера? И когда метод контроллера получает такое через запрос, как использовать это при разбиении на страницы в методе контроллера?