gpt4 book ai didi

javascript - AngularJS:来自服务的异步 $http.jsonp 调用

转载 作者:行者123 更新时间:2023-12-01 15:08:24 25 4
gpt4 key购买 nike

我正在尝试编写一个执行以下操作的简单应用程序:1.用户输入2个参数并点击一个按钮2. Angular调用一个返回JSON的外部JAVA Servlet3. App输出json字符串到屏幕

但是我有一个问题,当我点击按钮时没有任何反应。我相信(由于测试)发生这种情况的原因是由于调用是异步的,因此返回的变量为空。

相关代码:

controllers.js

function myAppController($scope,kdbService) {
$scope.buttonClick = function(){
var dat = kdbService.get($scope.tName,$scope.nRows);
$scope.data = dat;

}
}

services.js

angular.module('myApp.services', []).factory('kdbService',function ($rootScope,$http){
var server="http://localhost:8080/KdbRouterServlet";
return {
get: function(tname,n){
var dat;
$http.jsonp(server+"?query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
success(function(data, status, headers, config) {
console.log("1");
console.log(data);
dat=data;
}).
error(function(data, status, headers, config) {
alert("ERROR: Could not get data.");
});
console.log("2");
console.log(dat);
return dat;
}
}
});

index.html

<!-- Boilerplate-->
<h1>Table Viewer</h1>
<div class="menu" >
<form>
<label for="tName">Table Name</label>
<input id="tName" ng-model="tName"><br>
<label for="nRows">Row Limit</label>
<input id="nRows" ng-model="nRows"><br>
<input type="submit" value="Submit" ng-click="buttonClick()">
</form>
</div>
{{data}}
<!-- Boilerplate-->

当我执行代码并按下按钮时,没有任何反应。但是,如果我查看我的日志,我会看到:

2
undefined
1
Object {x: Array[2], x1: Array[2]}

很明显,发生的事情是 success 函数在 get 函数返回之后返回。因此放入 $scope.data 的对象是未定义的,但从 jsonp 调用返回的对象被留下。

有没有正确的方法来做到这一点?我看到的大多数教程都将数据分配给成功函数 内部 的 $scope 变量,从而跳过了这个问题。如果可能,我希望分离我的服务。

如有任何帮助,我们将不胜感激。

最佳答案

我会做这样的事情:

Controller

function myAppController($scope,kdbService) {
$scope.kdbService = kdbService;
$scope.buttonClick = function(){
$scope.kdbService.get($scope.tName,$scope.nRows);

}
}

服务

angular.module('myApp.services', []).factory('kdbService',function ($rootScope,$http){
var server="http://localhost:8080/KdbRouterServlet";
return {
data:{},
get: function(tname,n){
var self = this;
$http.jsonp(server+"?
query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
success(function(data, status, headers, config) {
console.log("1");
console.log(data);
self.data = data;
}).
error(function(data, status, headers, config) {
alert("ERROR: Could not get data.");
});
}
}
});

html

{{kdbService.data}}

在 get 方法中使用 continuation :

Controller

function myAppController($scope,kdbService) {
$scope.buttonClick = function(){
kdbService.get($scope.tName,$scope.nRows,function success(data){
$scope.data = data;
});
}
}

服务

    get: function(tname,n,successCallback){
$http.jsonp(server+"?query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
success(function(data, status, headers, config) {
successCallback(data,status,headers,config);
}).
error(function(data, status, headers, config) {
alert("ERROR: Could not get data.");
});
}

或者使用 $resource 服务

http://docs.angularjs.org/api/ngResource .$resource(你需要 angular-resource 模块

代码未经测试。

I want my service to be detached if possible.

然后将“数据对象”放入调用“数据提供者服务”的“数据服务”中。无论如何,您都必须在某处调用“数据提供程序服务”。在我看来,没有跳过这个问题,因为这就是 javascript 的工作方式。

也可以使用 angular.controller("name",["$scope,"service",function($s,s){}]);

因此您无需关心参数的调用方式,只要它们被正确定义和注入(inject)即可。

关于javascript - AngularJS:来自服务的异步 $http.jsonp 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14463719/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com