[英]Toaster doesn't appear after ajax returns success
一般来说,我对angularjs和Web开发是陌生的。 我有一个ajax请求,单击按钮后,该请求会将一些信息发送到服务器。 当请求返回成功时,我想显示一个祝酒词,表明请求已成功发送。 但是,该吐司从来没有弹出,但我确实有一个控制台日志,该日志确实打印了已发送请求。 为什么吐司不弹出?
注意:当我尝试在ajax调用的成功功能之外展示敬酒时,它确实起作用。
提前致谢。
这是我的代码:
(function() {
'use strict';
angular
.module('app.dashboard')
.controller('NotificationController', NotificationController);
NotificationController.$inject = ['$resource', '$http', '$state','toaster'];
function NotificationController($resource, $http, $state, toaster) {
var vm = this;
activate();
vm.alertSubmit = function() {
console.log(vm.subject);
console.log(vm.htmlContent);
const item = {
'subject':vm.subject,
'body': vm.htmlContent
};
//toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text); If I try this line the toast does appear.
//console.log(item);
//console.log(JSON.stringify(item));
$.ajax({
type: 'POST',
accepts: 'application/json',
url: 'api/pushnotification',
contentType: 'application/json',
data: JSON.stringify(item),
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
toaster.pop(vm.toaster.type, "Failure", "Message wasn't send.");
},
success: function (result) {
console.log(result);
toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
}
});
return false;
};
function activate() {
// the following allow to request array $resource instead of object (default)
$http
.get('api/auth')
.then(function(response) {
// assumes if ok, response is an object with some data, if not, a string with error
// customize according to your api
if (!response.data) {
$state.go('page.login');
}
else
{
var actions = {'get': {method: 'GET', isArray: true}};
vm.toaster = {
type: 'success',
title: 'Success',
text: 'Message was sent successfully.'
};
//vm.pop = function () {
// toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
//};
}
}, function() {
$state.go('page.login');
});
console.log("activate func");
}
}
})();
正如@georgeawg正确建议的那样,您可以使用$ http服务:
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
并将您的代码修改为:
$http.post({
'api/pushnotification', // Post URL
JSON.stringify(item), // Data to be sent
contentType: 'application/json' // Header Config
}).then(
// successCallback
function (result) {
console.log(result);
toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
},
// errorCallback
function (errorThrown) {
alert(errorThrown);
toaster.pop(vm.toaster.type, "Failure", "Message wasn't send.");
},
);
而不是您的代码:
$.ajax({
type: 'POST',
accepts: 'application/json',
url: 'api/pushnotification',
contentType: 'application/json',
data: JSON.stringify(item),
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
toaster.pop(vm.toaster.type, "Failure", "Message wasn't send.");
},
success: function (result) {
console.log(result);
toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.