javascript - 未捕获的类型错误:无法读取未定义的属性“ajax”
问题描述
我是 ember.js 的新手,这是我的第一个应用程序。我想建立一个登录表单,如果用户输入了正确的电子邮件和密码,他应该被转换到主页。我不确定是否应该将 Ember Data 用于登录部分,但我在某处读到 Ember Data 不适合这个特定的登录任务,所以我应该发出 ajax 请求(这个假设正确吗?)。但是,当我提出请求时,我收到以下错误:
未捕获的类型错误:无法在 LoginComponent.logUser 处读取未定义的属性“ajax”
我已经在登录组件类中发出了 http 请求,但我不确定是否应该在这部分使用控制器,因为在我看到的所有示例中,请求都是在控制器中处理的。但是,我不知道如何在单击登录按钮时使用登录控制器。
因此,除了如何处理我遇到的错误之外,我还有几个问题:
- 我应该使用 Ember Data (如果是的话)进行登录任务还是应该使用 ajax 方法?
- 控制器和组件(类)之间有什么区别,什么时候我应该使用它们中的每一个,用户点击处理数据或发出请求,就像在这种情况下一样?
预先感谢您的帮助!
这是我的代码
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}`);
});
}
}
路线.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);
}
}
解决方案
所以在我一个朋友的帮助下,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');
}
}
}
推荐阅读
- amazon-web-services - AWS Comprehend 自定义分类作业输出的行数多于输入行数
- c# - C# - 创建一个递归函数来计算列表的总和。是否可以仅使用列表作为唯一参数?
- javascript - 如何使用函数动态设置img src
- r - 如何根据不同数据框的两个 ID 列的匹配从数据框列中提取值?
- python - 二进制图像上的 Tesseract OCR
- plsql - 如何为游标的选择语句中使用的失败条件引发异常
- symfony - 移动到另一个托管 Symfony 2 后网站关闭
- javascript - 无法在 JavaScript 中获取 40MB 的 JSON 文件
- batch-file - 如何安全地回显 FOR 变量 %%~p 后跟字符串文字
- javascript - 有没有办法将javascript Date 对象转换为字符串,但保留在 Date 对象上使用 console.log 时显示的格式?