Question

我正在尝试使用angularjs获取查询字符串值。

我的网址：http://localhost/example.php?sportsId=3

当我申请var goto = $location.search()['sportsId'];时它返回我未定义。

但是，如果我在网址中添加哈希，例如Url: http://localhost/example.php#?sportsId=3

然后它返回正确的值3。

但在这种情况下，它还会给我Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=sportsID%3D&p4=sportsID%3D

此外，我的默认$_REQUEST['sportsId']无法使用哈希格式。

如何使用angularjs正确获取查询字符串中的值？

Answer 1

我知道这不是Angular，而是纯粹的JS并且像魅力一样（只是不添加伪路径，它会占用URL）。

function getUrlParameter(param, dummyPath) {
        var sPageURL = dummyPath || window.location.search.substring(1),
            sURLVariables = sPageURL.split(/[&||?]/),
            res;

        for (var i = 0; i < sURLVariables.length; i += 1) {
            var paramName = sURLVariables[i],
                sParameterName = (paramName || '').split('=');

            if (sParameterName[0] === param) {
                res = sParameterName[1];
            }
        }

        return res;
}

用法：

var sportdsId = getUrlParameter('sportsId');

Answer 2

请参阅以下链接

var goto = $location.search().sportsId;

Getting values from query string in an url using AngularJS $location

Answer 3

您需要使用

$location.search()

这会返回一个带有params的对象，所以让我们说你有 URL参数1 = VAL＆安培; param2的= val2的

这将提供以下内容

{ param1 : val, param2 : val2 }

还要确保启用

$locationProvider.html5Mode(true);

Answer 4

使用以下内容从$window.location.search属性创建自己的搜索对象：

    var search = $window.location.search
            .split(/[&||?]/)
            .filter(function (x) { return x.indexOf("=") > -1; })
            .map(function (x) { return x.split(/=/); })
            .map(function (x) {
                x[1] = x[1].replace(/\+/g, " ");
                return x;
            })
            .reduce(function (acc, current) {
                acc[current[0]] = current[1];
                return acc;
            }, {});

    var sportsId = search.sportsId;

或创建一个queryString工厂，您可以在任何地方使用..这组合了queryString的左右部分。即。在#之前和#

之后

(function () {
    "use strict";

    angular
        .module("myModuleName")
        .factory("queryString", QueryStringFactory);

    function QueryStringFactory($window, $location) {

        function search() {

            var left = $window.location.search
                .split(/[&||?]/)
                .filter(function (x) { return x.indexOf("=") > -1; })
                .map(function (x) { return x.split(/=/); })
                .map(function (x) {
                    x[1] = x[1].replace(/\+/g, " ");
                    return x;
                })
                .reduce(function (acc, current) {
                    acc[current[0]] = current[1];
                    return acc;
                }, {});

            var right = $location.search() || {};

            var leftAndRight = Object.keys(right)
                .reduce(function(acc, current) {
                    acc[current] = right[current];
                    return acc;
                }, left);

            return leftAndRight;
        }

        return {
            search: search
        };

    }

}());

用法：

var qs = queryString.search();
var sportsId = sq.sportsId;

Answer 5

约伯有三个简单的步骤：

通过将以下代码添加到控制器/服务来为HTML5模式配置角度：

app.config（[＆＃39; $ locationProvider＆＃39;，function（$ locationProvider）{ $ locationProvider.html5Mode（真）; }]）;
在HTML中添加基本元素：

＆＃13;

const glob = require('glob');
const player = require('player');

glob('*.mp3', (error, files) => {
  console.log("Init player");
  const p = new player(files);

  p.on('playing', function(song){
      console.log("Playing now: " + song._name);
  })
  .on('playend', function(song){
      console.log("Next song....");
  })
  .on('error', function(song){
      console.log("Error:" + error);
  });

  p.play();

  setTimeout(function(){
    p.next();
  }, 2000);
});

＆＃13;

注入＆＃34; $ location＆＃34;进入角度控制器：

app.controller（＆＃39; ABCController＆＃39;，[＆＃39; $ scope＆＃39;，＆＃39; $ location＆＃39;，ABCController]）;

最后，要获取查询字符串，请使用以下代码：

<base href="/">

答案已经存在于之前的答案中，我只是为了更好地理解而进行了总结。希望有人会从中受益。

Answer 6

这就是我使用的。它与接受的答案基本相同，但将所有参数作为对象返回并处理url组件的解码。

function getUrlParameters() {
    var pairs = window.location.search.substring(1).split(/[&?]/);
    var res = {}, i, pair;
    for (i = 0; i < pairs.length; i++) {
        pair = pairs[i].split('=');
        if (pair[1])
            res[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return res;
}

AngularJS：获取链接中没有哈希的查询字符串值

6 个答案: