Как правильно формировать AJAX запросы в Laravel в подключённых скриптах?

Question

[Goobert Cripto]

Не получается создавать AJAX запросы в подключённых js скриптах.
Только если я записываю в тегах на текущей странице.
Как только записываю в во внешний скрипт не работает вот код
это кнопка по которой отслеживается событие вызова AJAX

<button type="button" class="btn btn-default btn-block" id="test" ><img src="#" class="img-fluid" alt="registration" > Почта</button>

файл main.js содержит запрос

let test = document.querySelector('#test');
test.addEventListener('click',()=>{
    $.ajax({
        type:'GET', 
        url:`{{route(ajax_form_register')}}`,
        data:{
          test:'123'
        },
        success: function (data) {
            console.log(data);
        }
    });
});

при нажатии на кнопку всплывает ошибка GET 404 (Not Found)
хотя роут указан верный

Route::controller(AjaxController::class)->group(function(){
Route::get('/form_register','ajax_form_register')->name('ajax_form_register');
}

Comments

[ProjectSoft]

при нажатии на кнопку всплывает ошибка GET 404 (Not Found)

Консоль смотрели? Куда отправляется запрос?
Во внешнем скрипте это что url:`{{route(ajax_form_register')}}`,

[Goobert Cripto]

ProjectSoft, такое ощущение что шаблонизатор блейд не обрабатывет url:`{{route(ajax_form_register')}}` если это во внешнем скрипте. Но когда я его вписываю в саму html страницу в тегах script он начинает читаться как ссылка и всё отправляется. Как эту ссылку рендрить в отдельном скрипте?

[ProjectSoft]

Goobert Cripto, прописывать нормально, человеческим языком. Например url: '/ajax', где вы сможете определить, с какой формы пришло, и, соответственно, сделать правильный вывод в форму. И лучше всего $_POST для ajax использовать.

[Goobert Cripto]

ProjectSoft, ок прописал url: "{{url('/form_register')}}" но ситуация в корне не меняется. Прикол в том что сам блейд не хочет превращать в ссылку url. Как сделать чтобы превращал?

[Goobert Cripto]

Всё получилось.
Вообщем По умолчанию внешний js файл не поддерживает синтаксис blade-сервера. Таким образом, для отправки запроса ajax из внешнего js файла необходимо выполнить следующие действия:
1) создайте глобальную переменную для url файл следующим образом:
var URL_GLOBAL= "{{URL :: to ('/')}}";
2) И сделать так

let test = document.querySelector('#test');
test.addEventListener('click',()=>{
    $.ajax({
        type:'GET', 
        url:URL_GLOBAL+'/form_register',
        data:{
          test:'123'
        },
        success: function (data) {
            console.log(data);
        }
    });
});

[Goobert Cripto]

ProjectSoft, а почему тут лучше post использовать? Если мне нужно данные получить просто get. А не добавлять ? Вчём логика?

[ProjectSoft]

ок прописал url: "{{url('/form_register')}}" но ситуация в корне не меняется.

Так у вас это и было. Что прописывать то )))

почему тут лучше post использовать?

Goobert Cripto, просто дело вкуса.
А вообще, вы не хотите получить страницу целиком. Значит post.

Answer 1

[Вячеслав Плиско]

1. Джаваскрипт ничего не знает о php и laravel. Пропишите его явно или каким-то образом прокиньте в js.
2. Для регистрации нельзя использовать гет параметры. Регистрация меняет состояние, вы создаёте пользователя, потому надо использовать POST. Кроме идеологических причин, есть ещё причины безопасности и багоустойчивости. Гет запросы логируются и кешируются.
3. Зачем в 2022 году продолжать для таких запросов тащить jquery, если браузеры поддерживают fetch https://learn.javascript.ru/fetch

Comments

[Goobert Cripto]

Но Fetch не поддерживает события прогресса. Я тут просто хочу обновлять с помощью AJAX контент в форме. А post то естественно буду использовать при отправке данных нового пользователя