Как выполнить php функцию через ajax и потом вернуть ответ из php?

Question

[Jun ior]

Я решил создать блог где админ выкладывает всякие разные новости. У каждой новости есть количество лайков и просмотров и когда я нажимаю на кнопку поставить лайк он ставиться, но при этом страница полностью перезагружается. Совсем недавно я узнал что использую ajax можно выполнить php скрипт не обновляя страницу. И у меня возник вопрос "как?". Я перерыл весь интернет, но не нашёл ответ или если находил, то попросту не понимал. Не мог бы кто знает как, написать для меня пример кода и чтобы php возвращал и выводил на страницу данные после выполнения скрипта типа:
<?php
if($like=='1'){
echo 'Лайк поставлен!';
}else{
echo 'Произошла ошибка!';
}
?>

Answer 1

[JimmDiGreez]

Ajax используется через js, с точки же зрения бекенда это просто запрос, на который нужно ответить. Конечно, лучше отвечать не версткой, а чем-то удобным и понятным в js коде, например json с данными.
Предлагаю начать отсюда:
https://learn.javascript.ru/fetch

По поводу кода на php, предлагаю такой вариант:

<?php
//... some code about 'like'
echo json_encode($likeProcessingResult);
?>

Comments

[Jun ior]

Мне бы что нибудь с примерами

[JimmDiGreez]

IT-Programmer, по приведенной мною ссылке есть пример (так же там есть ссылка на XMLHttpRequest, чтобы лучше разобраться в теме). Продублирую пример сюда тогда.

fetch('/article/fetch/user.json')
  .then(function(response) {
    alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
    alert(response.status); // 200

    return response.json();
   })
  .then(function(user) {
    alert(user.name); // iliakan
  })
  .catch( alert );

[Jun ior]

А как написать обработчик событий который будет выполнять некий php скрипт

[JimmDiGreez]

IT-Programmer, обработчик событий в js? Как и раньше, просто в функции обработчика сделать вызов нужного php скрипта, через тот же самый фетч к примеру.
Например:

someButton.onclick = function() {
    fetch(serverUrl).
    then(function(response){
        console.log('success');
    });
};

Answer 2

[Алексей Дзюба]

Здравствуйте. Все, что Вам нужно сделать - отправить запрос с джаваскрипта на какой-то урл (грубо говоря, страницу). В джаваскрипт файле делаете запрос через XMLHttpRequest (гуглите прямо сейчас статьи от MDN - создателей браузера файрфокс - там всё очень хорошо написано), в этом запросе в коде пропишите json, который передаете серверу с фронта (например, вроде "{"likesCount": 42}"). Например, Вы сделали запрос на php-файл server.php, где у вас есть код с функцией UPDATE (если используете MySQL), который обновляет лайки на статьях. Вам нужно распарсить этот json и вставить likesCount в эту функцию.

А на самой странице, на фронте, Вы в можете выводить лайки как, например,

<span class="likes-count"><?php echo $likesCount ?></span>

Comments

[Jun ior]

Я не хочу казаться навязчивым , но я хотел бы узнать поподробней как всё это реализовать. В программировании я пока новичёк)

[Алексей Дзюба]

It Programmer, https://github.com/AlexDz27/My-Todos-App/blob/mast...
Гляньте вот код с 6 строчки по 55. Думаю, Вам это поможет)

Answer 3

[frees2]

Как реализовать кнопку Load more в ajax запросе на js?
Из функции отправляем запрос в подгружаемый файл, получаем к примеру новую информацию из ленты какой нибудь сторонней, обрабатываем её и снова посылаем назад, потом можно снова послать обратно...