未捕獲的類型錯誤：無法讀取未定義的屬性“ajax”

Question

我是 ember.js 的新手，這是我的第一個應用程序。 我想建立一個登錄表單，如果用戶輸入了正確的 email 和密碼，他應該被轉換到主頁。 我不確定是否應該將 Ember Data 用於登錄部分，但我在某處讀到 Ember Data 不適合這個特定的登錄任務，所以我應該提出 ajax 請求（這個假設正確嗎？）。 但是，當我提出請求時，我收到以下錯誤：

未捕獲的類型錯誤：無法在 LoginComponent.logUser 處讀取未定義的屬性“ajax”

我已經在登錄組件 class 中提出了 http 請求，但我不確定是否應該在這部分使用 controller，因為在控制器中處理的所有示例中都處理了該請求。 但是，我不知道如何使用登錄 controller 點擊登錄按鈕。

因此，除了如何處理我遇到的錯誤之外，我還有幾個問題：

1. 我應該使用 Ember Data（如果是，如何）進行登錄任務，還是應該使用 ajax 方法？
2. controller 和組件（類）之間有什么區別，什么時候我應該使用它們中的每一個，用戶點擊處理數據或發出請求，就像在這種情況下？

預先感謝您的幫助！

這是我的代碼

login.hbs - 模板：

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

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 - 組件 class

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}`);
        });
    }
}

路線.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 組件 class：

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);
    }
}

在這里，我單擊了按鈕並顯示了警報

2 ：這是紅色登錄請求的請求數據。 令人驚訝的是，請求有效負載與我的文本字段的內容相匹配

這是我在警報上單擊“確定”時顯示的內容。 請求數發生了變化

這是新顯示的登錄請求的請求數據（注意他的類型是 GET）

Answer 1

所以在我一個朋友的幫助下，POST請求轉換為GET的問題已經解決了。 原來問題出在表單元素上，默認情況下它具有預定義的功能，因此解決方案是使用 e.preventDefault() 來阻止它們。

這是已經工作的代碼：

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

export default class LoginComponent extends Component{
  @tracked email;
  @tracked password;
  @service router;
  
  @action
  logRequest(){
    let result=0;
    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 => {
            if(!response.ok){
                throw new Error('Network response was not ok');
            }
            result=1;
        })
        .catch(error => {
            alert(`There has been a problem with your fetch operation: ${error}`);
        });
    return result;
  }


  @action
  logUser(e){
    e.preventDefault();
        let result = this.logRequest;
        if(result){
            alert('Logged in');
            this.router.transitionTo('home');
        }
        else{
            alert('Not logged in');
        }
    }
}