带有外部参数 Angular 的 Ajax

Ajax with external parameter Angular

本文关键字：Ajax Angular 参数 外部      更新时间：2023-09-26

我是 angular 的新手，我愿意做的是将我过去在 jquery 中编写的一段代码替换为 angularjs。

目标是从 span 元素中获取一个字符串，将其一分为二，并将这两个字符串作为参数传递到 GET 请求中。

我正在努力学习最好的编码实践并提高自己，因此随时欢迎任何形式的评论。

jquery中的工作代码：

//Get Song and Artists  
setInterval(function () {
var data = $('#songPlaying').text();
var arr = data.split('-');
var artist = arr[0];
var songTitle = arr[1];
//Request Lyrics
$.get('lyricsRequester.php', { "song_author": artist, "song_name" : songTitle}, 
function(returnedData){
     console.log(returnedData);
    $('#refreshLyrics').html(returnedData);
});
},10000);

Angular 中的代码

    var app = angular.module("myApp", []);

app.factory('lyricService', function($http) {
   return {
        getLyrics: function($scope) {
        //$scope.songArr = $scope.currentSong.split('-'); <-- **undefined currentSong**
        //$scope.artist = $scope.songArr[0];
        //$scope.songTitle = $scope.songArr[1];
             return 
             $http.get('/lyricsRequester.php', {
        params: {
            song_author: $scope.artist,
            song_name: $scope.songTitle
        }
     }).then(function(result) {
            return result.data;
                        });
        }
   }
});
app.controller('lyricsController', function($scope, lyricService, $interval) {
   $interval(function(){ 
        lyricService.getLyrics().then(function(lyrics) {
            $scope.lyrics = lyrics; <-- **TypeError: Cannot read property 'then' of undefined**
            console.log($scope.lyrics);
        }); 
        }, 10000);
});

索引.html（只是一部分）

<div class="col-md-4" ng-controller="lyricsController">{{lyrics}}</div>
    <div class="col-md-4"><h3><span id="currentSong" ng-model="currentSong"></span></h3><div>
当与

换行符一起使用时，您需要小心您的 return 语句，在以下行中：

return 
$http.get('/lyricsRequester.php',

如果不这样做，JS会自动在return后添加一个分号，函数将返回undefined。

将 $http.get 语句移动到与返回语句相同的行。

return $http.get('/lyricsRequester.php', ...

请参阅以下文档：

MDN 返回声明

自动分号插入

至于你的第二个问题，你$scope并不是你真正注入到你的服务中的东西（比如$http）。示波器可用于控制器。你需要稍微重构一下代码才能使事情正常进行。

例如。getLyrics函数可以将歌曲作为参数。然后在控制器中，调用 lyricsService.getLyrics(someSong) 。作用域访问和操作仅在控制器中完成。

app.factory('lyricService', function($http) {
   return {
        getLyrics: function(song) {
        var songArr = song.split('-');
        var artist = songArr[0];
        var songTitle = songArr[1];
        return $http.get('/lyricsRequester.php', {
          params: {
              song_author: artist,
              song_name: songTitle
          }
     }).then(function(result) {
            return result.data;
                        });
        }
   }
});
app.controller('lyricsController', function($scope, lyricService) {
    $scope.currentSong = 'Judas Priest - A Touch of Evil';
   $interval(function(){ 
        lyricService.getLyrics($scope.currentSong).then(function(lyrics) {
            $scope.lyrics = lyrics;
            console.log($scope.lyrics);
        }); 
        }, 10000);
});

你还有一些其他的问题，比如在你的跨度上使用ng-model。 ng-model是一个与表单元素（输入，选择等）结合使用的角度指令，而不是像你那样的跨度。因此，您可能希望将其更改为输入字段。

$http不使用

.then，而是使用.success和.error。 您当时所说的行是未定义的，应该替换为成功和错误处理程序。 以下是文档中的示例：

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

见链接：https://docs.angularjs.org/api/ng/service/$http

相关文章：