未捕获的类型错误：无法读取未定义的属性“ajax”

如何解决未捕获的类型错误：无法读取未定义的属性“ajax”

我是 ember.js 的新手，这是我的第一个应用程序。我想构建一个登录表单，如果用户在其中传递了正确的电子邮件和密码，他应该被转换到主页。我不确定是否应该将 Ember Data 用于登录部分，但我在某处读到 Ember Data 不适合这个特定的登录任务，所以我应该发出 ajax 请求（这个假设对吗？）。但是，当我提出请求时，我收到以下错误：

未捕获的类型错误：无法读取 LoginComponent.logUser 处未定义的属性“ajax”

我在登录组件类中发出了 http 请求，但我不确定是否应该在这部分使用控制器，因为在我看到的所有示例中，请求是在控制器中处理的。但是，我不知道如何在单击登录按钮时使用登录控制器。

所以除了如何处理我遇到的错误之外，我还有几个问题：

1. 我应该在登录任务中使用 Ember Data（如果是，如何使用）还是应该使用 ajax 方法？
2. 控制器和组件（类）之间有什么区别，我应该在何时使用它们中的每一个，用户点击处理数据或在这种情况下发出请求？

预先感谢您的帮助！

这是我的代码

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 - 组件类

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)

解决方法

所以在朋友的帮助下，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');
        }
    }
}