热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

重定向到另一个页面会阻止函数返回其值

如何解决《重定向到另一个页面会阻止函数返回其值》经验,为你挑选了2个好方法。

我有一个登录页面,如果用户登录,我想将用户重定向到另一个HTML页面,在那里我将列出我从服务器获得的用户任务.

问题是:

即使我写的函数正常工作,后端API返回我想要的值(我可以看到控制台上的值详细信息)当我使用重定向代码时$window.location.href = '../Kullanici/userPanel.html页面在登录后立即重定向,并且由于某种原因我不能使用返回的值重定向后的函数.不仅如此,我还无法看到控制台日志中返回的值的详细信息.

这是我的代码:

控制器:

app.controller('myCtrl', ['$scope', '$http', '$window','$mdToast', 'userTaskList',
    function ($scope, $http, $window, $mdToast, userTaskList) {
        $scope.siteLogin = function () {

            var userName = $scope.panel.loginUserName;
            var password = $scope.panel.loginPassword;
            var loginMember = { //JSON data from login form
                K_ADI: $scope.panel.loginUserName,
                PAROLA: $scope.panel.loginPassword
            };
            $http({
                method: 'POST',
                url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: loginMember

            }).then(function successCallback(response) {

                console.log("message sent", response);
                $scope.data = response.data.error.data;
                if ($scope.data === true) {//if username and password is correct

                    console.log("User exists");
                    userTaskList.showActiveTasks(userName)
                        .then(function (activeTaskResponse) {
                            var activeTasks = activeTaskResponse;
                            console.log("Active tasks (controller): ", activeTaskResponse);

                            userTaskList.showFinishedTasks(userName)
                                .then(function (finishedTaskResponse) {
                                    var finishedTasks = finishedTaskResponse;
                                    console.log("Finished tasks(controller): ", finishedTaskResponse);
                                    $scope.getMessage();
                                    $window.location.href = '../Kullanici/userPanel.html';
                                }, function (err) {
                                    console.log(err);
                                });

                        }, function (err) {
                            console.log(err);
                        });

                }

            }, function errorCallback(response) {
                console.log("Couldn't send", response);
            });
        }

那么是什么导致了这个问题,我该如何解决呢?

编辑:我嵌套.然后部分,但它正确不工作并给予This value was just evaluated now警告.所以我不能在重定向的HTML页面上使用数据.

我也删除了工厂,因为它使代码看起来非常混乱,它可能不是问题的根源.



1> Jacques Oliv..:

我会将你的两个函数嵌套在第一个promise中,然后在完成所有这些函数后重定向.就像是

app.controller('myCtrl', ['$scope', '$http', '$window','$mdToast', 'userTaskList',
  function ($scope, $http, $window, $mdToast, userTaskList) {
    $scope.siteLogin = function () {

        var userName = $scope.panel.loginUserName;
        var password = $scope.panel.loginPassword;
        var loginMember = { //JSON data from login form
            K_ADI: $scope.panel.loginUserName,
            PAROLA: $scope.panel.loginPassword
        };

        $http({
            method: 'POST',
            url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
            headers: {
                'Content-Type': 'application/json'
            },
            data: loginMember

        }).then(function successCallback(response) {

            console.log("message sent", response);
            $scope.data = response.data.error.data;
            if ($scope.data === true) {//if username and password is correct

                console.log("User exists");
                userTaskList.showActiveTasks(userName)
                    .then(function (res) {
                        var activeTasks = res;
                        console.log("Active tasks (controller): ", res);

                        userTaskList.showFinishedTasks(userName)
                        .then(function (res) {
                            var finishedTasks = res;
                            console.log("Finished tasks(controller): ", res);
                            $scope.getMessage(); 
                            $window.location.href = '../Kullanici/userPanel.html';
                        }, function (err) {
                            console.log(err);
                        });

                    }, function (err) {
                        console.log(err);
                    });

            } else { //if username or password is wrong
                $mdToast.show(
                    $mdToast.simple()
                        .textContent('Username or Password is wrong')
                        .position('right')
                        .hideDelay(3000)
                            );      
            } 
        }, function errorCallback(response) {
            console.log("Couldn't send", response);
        });          
     }
   }
]);



2> georgeawg..:

哦,我将ngRoute注入我的AngularJS模块,但尚未使用它.

使用$window.location.href杀死应用程序并加载其他页面,失去$rootScope,$scope和所有的业务数据.

重新设计代码以使用路由器并将数据存储在服务中:

$routeProvider
 .when('/userPanel' , {
     templateUrl: 'partials/userPanel.html',
     controller: panelController
})
 panelService.set(data);
 $location.path("/userPanel.html");     

或使用localStorage存储数据:

 localStorage.setItem('panelData', JSON.stringify(data));
 $window.location.href = '../Kullanici/userPanel.html';

存储在服务中的数据将在路由更改(销毁$ scope)后继续存在.存储的数据localStorage将在页面更改(销毁应用程序)后继续存在.


代码可以简化

这将解决在更改路由之前让页面等待数据的问题.

由于该getMessages函数发出HTTP请求,因此需要修改它以返回一个promise:

$scope.getMessages = getMessages;
function getMessages() {
    return $http({
        method: 'GET',
        url: 'http://localhost:5169/api/chat/chatCek'
    }).then(function successCallback(res) {
        console.log("Mesajlar", res);
        $scope.messages = res.data.error.data;
        return res.data.error.data;
    }, function errorCallback(res) {
        console.log("Hata", res);
        throw res;
    });
}

然后延迟更改路由,直到getMessages数据从服务器返回,从getMessages承诺链:

$http({
    method: 'POST',
    url: 'http://localhost:5169/api/Kullanicilar/KullaniciDogrula',
    data: loginMember
}).
  then(function successCallback(response) {
    console.log("message sent", response);
    $scope.data = response.data.error.data;
    if ($scope.data !== true) { throw "user error" };
    //username and password is correct
    console.log("User exists");
    return userTaskList.showActiveTasks(userName);
}).
  then(function (activeTaskResponse) {
    var activeTasks = activeTaskResponse;
    console.log("Active tasks (controller): ", activeTaskResponse);
    return userTaskList.showFinishedTasks(userName)
}).
  then(function (finishedTaskResponse) {
    var finishedTasks = finishedTaskResponse;
    console.log("Finished tasks(controller): ", finishedTaskResponse);
    //CHAIN from getMessages promise
    return $scope.getMessages();
}).
  then(function(data) {
    console.log(data);
    //SAVE data before changing route
    panelService.set(data);
    $location.path( "/userPanel" );
    //OR STORE data before changing app
    //localStorage.setItem('panelData', JSON.stringify(data));             
    //$window.location.href = '../Kullanici/userPanel.html';
}).
  catch(function (response) {
    console.log("Couldn't send", response);
    throw response;
});


推荐阅读
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • 本文详细介绍了cisco路由器IOS损坏时的恢复方法,包括进入ROMMON模式、设置IP地址、子网掩码、默认网关以及使用TFTP服务器传输IOS文件的步骤。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
author-avatar
夜遊神_丶
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有