Question

我对angularjs和web开发很新。我有一个ajax请求，在按下一个按钮后会向服务器发送一些信息。当请求返回成功时，我想显示一个吐司，表示请求已成功发送。然而，吐司永远不会弹出，但我确实有一个控制台日志，可以打印发送请求的打印件。为什么烤面包不流行？

注意：当我尝试在ajax调用的成功函数之外显示toast时，它确实有效。

提前致谢。

这是我的代码：

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

Answer 1

正如@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);
            }
        });

ajax返回成功后，烤面包机不会出现

1 个答案: