К сделать AJAX запрос с тегом a?

Question

[Zuzupoj]

Добрый день, в своём фронте я использую стилизованные ссылки, а не кнопки:

<input type="text" class="form-control" id="inputEmail" placeholder="email">
<input type="password" class="form-control" id="inputPassword" placeholder="password">
<a href="" class="auth-button" id="auth-send">Enter</a>

У меня есть работающий скрипт для отправки POST запроса на сервер по нажатию на ссылку:

$(document).ready(function(){
       $('#auth-send').on('click', function(event) {
        event.preventDefault();
        email = $("#inputEmail").val();
        password = $("#inputPassword").val();
        $.ajax({
          url: "http://127.0.0.1:8000/auth/register",
          type: "POST",
          dataType: "json",
          contentType: "application/json",
          data: JSON.stringify({
            email: email,
            password: password
          }),
          success: function(result){
            console.log("success", result);
          },
          error: function(data){
            if (data.status == 400) {
              console.log("Bad Request", data.responseJSON);
            }else if (data.status == 422) {
              console.log("Validation Error", data.responseJSON);
            }
          }
        });
       });
     });

Насколько я понял ссылка каждый раз обновляет страницу, поэтому я не могу прочитать вывод в консоли. Как мне это исправить не прибегая замены тега a, на тег button?

Comments

[ProjectSoft]

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

$('#auth-send').on('click', function(e) {
	e.preventDefault();
	/**
	 * Ваш код
	**/
	return !1;
});

[Zuzupoj]

TheAndrey7, Это минимальный предоставленный код

[Вадим]

Zuzupoj, Вопрос не в количестве предоставленного кода. Ссылка должна менять урл страницы. Если этого не происходит - значит вёрстка семантически не корректна и нужно заменить ссылку на кнопку.

Пожалуй, единственный случай, когда ссылка может НЕ менять урл страницы, так это когда с помощью JS используется прогрессивное улучшение и поведение ссылки отменяется по умолчанию. Таким образом, если по каким-то причинам js не отработал, то ссылка переведёт на отдельную страницу с формой. А если всё нормально отработало, то форма покажется в модальном окне.

Ну и как видите, вопрос не только в семантике. Побуждает делать костыли, как в Вашем случае.

Answer 1

[pantsarny]

href=“#” или return false в функции