Аутентификация формы входа с использованием jQuery AJAX

Question

В коде ниже alert дает мне undefined.Я думаю, что проблема связана с обратной косой чертой в URL или с чем-то еще.это структура json

"{
            \"UserName\":\"abc\",
            \"Password\":\"123456\"
}"

Как проверить, что имя пользователя и пароль, введенные пользователем, присутствуют в URL?

<form action="#" id="loginForm">
  <div class="form-group">
    <label for="userName" class="font-weight-bold" style="width:100%;">Username<a href="#" class="float-right font-weight-light axa-color">Forgot?</a></label>
    <input type="text" class="form-control" id="userName" name="userName" placeholder="Enter Email">
  </div>
  <div class="form-group">
    <label for="password" class="font-weight-bold" style="width:100%;">Password<a href="#" class="float-right font-weight-light axa-color">Forgot?</a></label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password">
  </div>
  <button type="button" id="login_btn" class="btn btn-lg btn-block">LOGIN</button>
</form>

$("#login_btn").click(function() {
  var userName = $("#userName").val();
  var password = $("#password").val();
  authenticate(userName, password);
});

function authenticate(userName, password1) {
  $.ajax({
    type: "POST"
    url: "http://api/User/login",
    dataType: 'json',
    async: false,
    data: {
      username: userName,
      password: password1
    },
    success: function(data) {
      alert(data);
    }
  })
};

Answer 1

У вас есть опечатка в объекте, который вы передаете функции $.ajax, вам нужно , после "POST":

$("#login_btn").click(function() {
  var userName = $("#userName").val();
  var password = $("#password").val();
  authenticate(userName, password);
});

function authenticate(userName, password1) {
  $.ajax({
    type: "POST",
    url: "https://reqres.in/api/users",
    dataType: 'json',
    async: false,
    data: {
      username: userName,
      password: password1
    },
    success: function(data) {
      console.log(data);
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="loginForm">
  <div class="form-group">
    <label for="userName" class="font-weight-bold" style="width:100%;">Username<a href="#" class="float-right font-weight-light axa-color">Forgot?</a></label>
    <input type="text" class="form-control" id="userName" name="userName" placeholder="Enter Email">
  </div>
  <div class="form-group">
    <label for="password" class="font-weight-bold" style="width:100%;">Password<a href="#" class="float-right font-weight-light axa-color">Forgot?</a></label>
    <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password">
  </div>
  <button type="button" id="login_btn" class="btn btn-lg btn-block">LOGIN</button>
</form>

Answer 2

Измените данные на:

data: {
    userName: userName,
    password: password
},

(Вы написали это в неправильной позиции.) После этого ваша неопределенная ошибка исчезнет.

В функции () вы такженаписал password1 вместо password.