Какой лучше пример из сети взять за образец работы с Ajax (jQuery) из Laravel?

Question

[Роман]

Здравствуйте!

Мне нужно форму через Ajax (jQuery) на Laravel реализовать. Посмотрел примеры в сети - а там кто во что горазд))) Кто CSRF-токен "руками" через хидеры передает, кто еще чего.

Посоветуйте пожалуйста 100% годный пример реализации Ajax-фомы на jQuery в Laravel.

Спасибо!

П.С. vue просьба не предлагать)) Я в принципе хочу с этим разобраться, vue - для меня тема незнакомая, но интересная, но вот именно сейчас на это просто нет времени.

Comments

[JhaoDa]

нужно форму через Ajax (jQuery) на Laravel реализовать

ШТО?

[jazzus]

У меня когда потребность в Ajax возникла тоже думал зачем еще фреймворк, ссылку на jQuery и сейчас быстро переделаю. В итоге одни вопросы были. В плане совместимости с Ларавель. Как данные передать на бэк и обратно. До сих пор не знаю. После установки Vue я через 2 дня почти весь функционал перенес (даже который не планировал). Да там есть тонкости с реактивностью и потом исправлял ошибки, но в целом он очень простой. Данные фетчишь или передаешь props в date, все запросы/отправки в методах, похожих на Ларавелевские, остальное – верстка. Плюс в Ларавель все для него есть – примеры компонентов, app.js + офигенные Laravel Resource для объектов. В ресурсах можно не только данные с бэка передавать, но и результаты методов для каждого объекта коллекции (например isActive true/false). И у тебя на фронте с бэка isActive будет. Т.е. на фронте почти ничего не программируешь в итоге, только запрос/передача данных. Я бы именно Vue для Ларавель рекомендовал

[Роман]

jazzus, это всё прекрасно, но мне форму завтра до обеда нужно показать)))

Если реально будет какой-то гемор с аяксом+ларавель (хотя я не думаю что такое будет) придется сделать с простым релоадом страницы)))

То есть у меня вопрос не столько по самой реализации, сколько по нюансам в контексте именно Ларавеля.

[jazzus]

procode, вот максимально простой вариант для VUE:
компонент формы

<template>
<!-- Обязательно код оборачивать в любой тег -->
    <form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input v-model="user.email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary" @click.prevent="submitEmail()">Sign in</button>
      </div>
    </div>
  </form>

</template>

<script>

  export default {

    data() {
        return {
            user: {email:''},
            errors: []
        }
    },

    methods: {

      submitEmail() {
            axios.post(`user/email`, this.user)
                  .then((response) => {
                      console.log(response.data.data)
                  })

                  // Ошибки из ларавелевской переменной $errors
                  .catch((error)=> {
                    this.errors  = error.response.data.errors;
                  })
      }
    }
}
</script>

user/email - это роут из web.php, который методом post отправит юзера с емейлом прямо в контроллер. Где ты можешь например записать эти данные в бд)
сам компонент подключаешь в app.js по примеру, который там есть
инициализируешь командой npm run watch в терминале (нужно установить npm install)
затем вставляешь в блейд шаблон кодом

<div id="app">
      <form-component></form-component>
</div>

и форма готова

Answer 1

[Роман]

Эмпирическим путем было установлено, что реализация Ajax при помощи jQuery в среде Laravel ничем не отличается от реализации в среде НЕ Laravel ))))))

Единственное что, в форму нужно добавить это:

@csrf

Comments

[JhaoDa]

Да ты что...

Answer 2

[Михаил Власов]

Насчет ajax-запросов, посоветую fetch API. Это встроенная в javascript функциональность, которая позволяет делать запросы на бэкенд. Документация
Пример:

fetch('http://твой-url/', {
   // Параметры ниже не обязательны, по умолчанию метод GET
   method: 'POST', // любой твой метод
   mode: "cors", // no-cors, cors, *same-origin
   cache: "no-cache",  // *default, no-cache, reload, force-cache, only-if-cached
   credentials: "same-origin", // include, *same-origin, omit
   headers: {
      // Здесь твои заголовки
      "Content-Type": "application/json",
   },
   // Тут тело запроса с информацией, которую отправляешь серверу, переменная data – javascript-объект
   body: JSON.stringify(data)
})
.then(response => {
   // Тут пиши что делаешь после выполнения запроса
})
.catch(error => {
   // Тут пиши обработку возникшей ошибки, пример ниже:
   console.log(error);
})

Comments

[Роман]

спасибо, возьму на заметку, но сейчас просто нет времени на новые технологии, джквери знакома и понятна, но не совсем ясны нюансы реализации в контексте ларавеля.

[Михаил Власов]

Ну смотри, ты просто пишешь на бэкенде обработку на нужный роут. То есть, к примеру, у тебя есть адрес: твой-сайт/form – ставишь обработку post-запроса на этот url и уже на бэкенде из тела запроса (body) достаешь данные, которые на фронте fetch'ом отправил. Учить здесь толком нечего, просто юзай по документации, отправляй в теле запроса нужные данные и доставай их на бэкенде, далее с данными уже делай что нужно.

Answer 3

[Дмитрий]

В документации есть информация о том, как прикрутить токен к jQuery Ajax. Один раз настроили и забыли.