我是ember.js的新手，这是我的第一个应用程序。我想构建一个登录表单，如果用户在其中传递了正确的电子邮件和密码，他应该过渡到主页。我不知道我是否应该使用ember数据的登录部分，但我读到的地方，ember数据是不适合这个特定的登录任务，所以我应该作出 AJAX 请求（这个假设是正确的吗？）。然而，当我提出请求时，我收到了以下错误：
未捕获的类型错误：无法读取LoginComponent.logUser中未定义的属性' AJAX '
我在一个登录组件类中发出了http请求，但我不确定是否应该使用控制器来处理这部分，因为在我所看到的所有示例中，请求都是在控制器中处理的。然而，我不知道如何在单击登录按钮时使用登录控制器。
因此，除了如何处理我遇到的错误之外，我还有几个问题：
1.我应该使用Ember数据（如果是的话，如何）登录任务还是应该使用 AJAX 方法？
1.控制器和组件（类）之间的区别是什么？在本例中，当我应该使用它们中的每一个时，用户点击处理数据或发出请求？
提前感谢您的帮助！
这是我的代码
登录.hbs -模板：

<h1 id="pageTitle">Log In</h1>
<Login/>

登录.hbs -组件：

<form {{on "submit" this.logUser}} id="login">
    <label class='formElement labelLogin'>Email :</label><br>
    <Input class='formElement input' @value={{this.email}}/><br>
    <label class='formElement labelLogin'>Password :</label><br>
    <Input class='formElement input' @value={{this.password}}/><br>
    <button id="loginButton" class='button formElement' type="submit">Log In</button> 
</form>

login.js -组件类

import Component from '@ember/component';
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";

export default class LoginComponent extends Component{
  @tracked email;
  @tracked password;

  @action
  logUser(){
        let userData = JSON.stringify({
            'email' : this.email,
            'password' : this.password
        });
        Ember.$.ajax({
            url : 'https://gara6.bg/auto-api/users/login',
            type : 'POST',
            dataType: 'json',
            data : userData,
        }).then(() => {
            alert('Logged In');
            this.transitionToRoute('home');
        }).catch(function(error){
            alert(`Error: ${error}`);
        });
    }
}

routes.js:

import EmberRouter from '@ember/routing/router';
import config from 'gara6/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('login');
  this.route('home');
});

以下是使用fetch编辑的login.js组件类：

import Component from '@ember/component';
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";

export default class LoginComponent extends Component{
  @tracked email;
  @tracked password;

  @action
  logUser(){
        let userData = {
            'email' : this.email,
            'password' : this.password
        };
        let fetchObject = {
            method: 'POST',
            headers : {
                'Content-type' : 'application/json', 
            },
            body : JSON.stringify(userData),
        };
        fetch('https://gara6.bg/auto-api/users/login',fetchObject)
        .then(response => {
            alert(response.status);
            alert(response.statusText);
            if(!response.ok){
                alert('Network response was not ok');
            }
            alert(response.json());
            return response.json();
            // alert('Logged In');
            // this.transitionToRoute('home');
        }).then(data =>{
            alert(data);
        }).catch(error => {
            alert(`There has been a problem with your fetch operation: ${error}`);//This is the only alert that shows up.
        });
        console.log(userData);
    }
}

Here I have clicked on the button and the alert shows up
2：This is the request data for the red login request. Surprisingly, there is request payload which matches the content of my text fields中的每个元素
Here is what is shown when I click OK on the alert. The number of requests have changed
This is the request data for the newly shown login request (note his type is GET)