javascript - 使用AngularJS $ location从URL中获取查询字符串中的值

关于$ location.search,文档说,

在没有任何参数的情况下调用时返回当前url的搜索部分(作为对象)。

在我的网址中,我的查询字符串有一个参数'?test_user_bLzgB' 没有价值。 还有' $ location.search()' 返回一个对象。 我如何获得实际文本?

Ian Warburton asked 2019-08-12T17:38:02Z
9个解决方案
147 votes

不确定自接受的答案被接受后它是否已经改变,但是有可能。

$locationProvider将返回键值对的对象,与查询字符串相同的对。 没有值的键只是作为true存储在对象中。 在这种情况下,对象将是:

{"test_user_bLzgB": true}

您可以使用$locationProvider直接访问此值

示例(具有较大的查询字符串):[http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse]

注意:由于哈希(因为它会转到[http://fiddle.jshell.net/#/url,]会创建一个新的小提琴),这个小提琴将不适用于不支持js历史的浏览器(将 在IE中不起作用< 10)

编辑:
正如@Naresh和@DavidTchepak的评论所指出的那样,$locationProvider也需要正确配置:[https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration]

TheSharpieOne answered 2019-08-12T17:38:50Z
47 votes

如果您只需要将查询字符串视为文本,则可以使用:$window.location.search

andersh answered 2019-08-12T17:39:15Z
35 votes

$location.search()返回一个对象,包含作为变量的键和值作为其值。所以:如果你写这样的查询字符串:

?user=test_user_bLzgB

你可以很容易地得到这样的文字:

$location.search().user

如果你不想使用密钥,值如?foo = bar,我建议使用散列#test_user_bLzgB,

并打电话

$location.hash()

会返回' test_user_bLzgB' 这是您要检索的数据。

附加信息:

如果您使用了查询字符串方法,并且您获得了一个带有$ location.search()的空对象,这可能是因为Angular正在使用hashbang策略而不是html5策略...要使其正常工作,请将此配置添加到模块中

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
alejandrociatti answered 2019-08-12T17:40:16Z
13 votes

首先使URL格式正确以获取查询字符串#?q = string对我有用

http://localhost/codeschool/index.php#?foo=abcd

将$ location服务注入控制器

app.controller('MyController', [ '$location', function($location) { 

    var searchObject = $location.search();

    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };

    alert( searchObject.foo );

} ]);

所以输出应该是abcd

MasoodUrRehman answered 2019-08-12T17:40:54Z
10 votes

你也可以使用它

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var queryValue = getParameterByName('test_user_bLzgB');
Rolwin C answered 2019-08-12T17:41:18Z
9 votes

如果您的<base href="/">无法正常工作,请确保您拥有以下内容:

1)<base href="/">在应用程序的模块配置中配置

appModule.config(['$locationProvider', function($locationProvider) {
   $locationProvider.html5Mode(true);
}]);

2)<base href="/">存在于您的HTML中

<head>
  <base href="/">
  ...
</head>

参考文献:

  1. base href =&#34; /&#34;
  2. html5Mode
Mahesh answered 2019-08-12T17:42:11Z
7 votes

Angular不支持这种查询字符串。

URL的查询部分应该是&分隔的键值对序列,因此可以完美地解释为对象。

根本没有API来管理不代表键值对集的查询字符串。

rewritten answered 2019-08-12T17:42:50Z
0 votes

在我的NodeJS示例中,我有一个网址&#34; localhost:8080 / Lists / list1.html?x1 = y&#34; 我想要遍历和获取价值观。

为了使用$ location.search()来获得x1 = y,我做了一些事情

  1. 脚本源到angular-route.js
  2. 注入&#39; ngRoute&#39; 进入你的app模块的依赖项
  3. 配置您的locationProvider
  4. 添加$ location的基本标记(如果你没有,你的搜索()。x1将不返回任何内容或未定义。或者如果基本标记有错误的信息,你的浏览器将无法在脚本中找到你的文件 您的.html需要的src。始终打开页面的查看源来测试您的文件位置!)
  5. 调用位置服务(search())

我的list1.js有

    var app = angular.module('NGApp', ['ngRoute']);  //dependencies : ngRoute
    app.config(function ($locationProvider) { //config your locationProvider
         $locationProvider.html5Mode(true).hashPrefix('');
    });

    app.controller('NGCtrl', function ($scope, datasvc, $location) {// inject your location service
        //var val = window.location.href.toString().split('=')[1];
        var val = $location.search().x1;    alert(val);
        $scope.xout = function () {
           datasvc.out(val)
           .then(function (data) {
              $scope.x1 = val;
              $scope.allMyStuffs = data.all;
           });
        };
        $scope.xout();
    });

我的list1.html有

<head>
    <base href=".">
    </head>
<body ng-controller="NGCtrl">
<div>A<input ng-model="x1"/><br/><textarea ng-model="allMyStuffs"/></div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="list1.js"></script>
</body>

指南:[https://code.angularjs.org/1.2.23/docs/guide/$location]

Jenna Leaf answered 2019-08-12T17:44:19Z
0 votes

我的修复更简单,创建工厂,并实现为一个变量。 例如

angular.module('myApp', [])

// This a searchCustom factory. Copy the factory and implement in the controller
.factory("searchCustom", function($http,$log){    
    return {
        valuesParams : function(params){
            paramsResult = [];
            params = params.replace('(', '').replace(')','').split("&");
            
            for(x in params){
                paramsKeyTmp = params[x].split("=");
                
                // Si el parametro esta disponible anexamos al vector paramResult
                if (paramsKeyTmp[1] !== '' && paramsKeyTmp[1] !== ' ' && 
                    paramsKeyTmp[1] !== null){          
                    
                    paramsResult.push(params[x]);
                }
            }
            
            return paramsResult;
        }
    }
})

.controller("SearchController", function($scope, $http,$routeParams,$log,searchCustom){
    $ctrl = this;
    
    var valueParams = searchCustom.valuesParams($routeParams.value);
    valueParams = valueParams.join('&');

    $http({
        method : "GET",
        url: webservice+"q?"+valueParams
    }).then( function successCallback(response){
        data = response.data;
        $scope.cantEncontrados = data.length; 
        $scope.dataSearch = data;
        
    } , function errorCallback(response){
        console.log(response.statusText);
    })
      
})
<html>
<head>
</head>
<body ng-app="myApp">
<div ng-controller="SearchController">
<form action="#" >
                          
                            
                            <input ng-model="param1" 
                                   placeholder="param1" />
                            
                            <input  ng-model="param2" 
                                    placeholder="param2"/>
                        
<!-- Implement in the html code 
(param1={{param1}}&param2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params
-->          
                        <a href="#seach/(param1={{param1}}&param2={{param2}})">
                            <buttom ng-click="searchData()" >Busqueda</buttom>
                        </a>
                    </form> 
</div>
</body>

Ivan Fretes answered 2019-08-12T17:44:57Z
translate from https://stackoverflow.com:/questions/16964444/getting-values-from-query-string-in-an-url-using-angularjs-location