使用AngularJS进行基本的AJAX GET调用

时间:2013-09-11 21:00:06

标签: jquery angularjs google-chrome-extension

我正在使用Angular JS编写Chrome扩展程序。我需要从第三方网站加载HTML页面并解析它。

使用Angular JS $resource(这有更好的方法吗?)我得到一些奇怪的对象,HTML页面的每个字符都是对象的一个​​属性:

g {0: "<", 1: "!", 2: "D", 3: "O", 4: "C", 5: "T", 6: "Y", 7: "P", 8: "E", 9: " ", 10: "h", 11: "t", 12: "m", 13: "l", 14: " ", 15: "P", 16: "U", 17: "B", 18: "L", 19: "I", 20: "C", 21: " ", 22: """, 23: "-", 24: "/", 25: "/", 26: "W", 27: "3", 28: "C", 29: "/", 30: "/", 31: "D", 32: "T", 33: "D", 34: " ", 35: "X", 36: "H", 37: "T", 38: "M", 39: "L", 40: " ", 41: "1", 42: ".", 43: "0", 44: " ", 45: "T", 46: "r", 47: "a", 48: "n", 49: "s", 50: "i", 51: "t", 52: "i", 53: "o", 54: "n", 55: "a", 56: "l", 57: "/", 58: "/", 59: "E", 60: "N", 61: """, 62: " ", 63: """, 64: "h", 65: "t", 66: "t", 67: "p", 68: ":", 69: "/", 70: "/", 71: "w", 72: "w", 73: "w", 74: ".", 75: "w", 76: "3", 77: ".", 78: "o", 79: "r", 80: "g", 81: "/", 82: "T", 83: "R", 84: "/", 85: "x", 86: "h", 87: "t", 88: "m", 89: "l", 90: "1", 91: "/", 92: "D", 93: "T", 94: "D", 95: "/", 96: "x", 97: "h", 98: "t", 99: "m"…}

这是我的资源接口定义:

[...]
factory('search', function($resource) {
    return $resource('http://www.example.net/search/:title');
}).
[...]

这就是我使用它的方式:

var test = search.get({title: 'The King'}, function(data) {
    console.log(data);
});

有没有办法接收HTML页面作为字符串或DOM树,所以我可以解析它?

1 个答案:

答案 0 :(得分:3)

使用$ http服务而不是$ resource。您也不希望仅为此包含额外的$ resource脚本/依赖项。

简单用法:

$http.get('path/here').then(function(response) {
  console.log(response.data);
});

使用良好的应用程序架构实现$ http调用的示例: Live demo here (click).

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

app.factory('myService', function($http, $q) {
  return {
    getPage: function(page) {
     var deferred = $q.defer();

     $http.get(page).then(function(response) {
       deferred.resolve(response.data);
     });

     return deferred.promise;
    }
  };
});

app.controller('appCtrl', function($scope, myService) {
  $scope.page = myService.getPage('test');
});