Lấy giá trị từ chuỗi truy vấn trong url bằng AngularJS $ location

95

Về $ location.search, các tài liệu nói,

Trả về phần tìm kiếm (dưới dạng đối tượng) của url hiện tại khi được gọi mà không có bất kỳ tham số nào.

Trong url của tôi, chuỗi truy vấn của tôi có tham số '? Test_user_bLzgB' không có giá trị. Ngoài ra, '$ location.search ()' trả về một đối tượng. Làm cách nào để nhận được văn bản thực tế?

javascript  angularjs 
— Ian Warburton
nguồn
Đối tượng nào bạn nhận được? Bạn có một câu hỏi hay một câu chuyện phiếm nào thể hiện vấn đề mà bạn phải đối mặt không? Bạn đúng khi bạn sử dụng $location.search()nhưng tôi muốn kiểm tra "đối tượng" mà bạn nhận được khi bạn gọi nó ...
— callmekatootie
Tôi không biết nó là vật gì. Tôi đã thử liệt kê các thuộc tính nhưng dường như không có.
— Ian Warburton
Không chắc chắn về cách thực hiện thao tác kiểm tra chuỗi truy vấn.
— Ian Warburton

Câu trả lời:

151

Không chắc liệu nó có thay đổi kể từ khi câu trả lời được chấp nhận được chấp nhận hay không, nhưng có thể.

$location.search()sẽ trả về một đối tượng gồm các cặp khóa-giá trị, các cặp tương tự như chuỗi truy vấn. Một khóa không có giá trị chỉ được lưu trữ trong đối tượng dưới dạng true. Trong trường hợp này, đối tượng sẽ là:

{"test_user_bLzgB": true}

Bạn có thể truy cập giá trị này trực tiếp với $location.search().test_user_bLzgB

Ví dụ (với chuỗi truy vấn lớn hơn): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Lưu ý: Do hàm băm (vì nó sẽ đi đến http://fiddle.jshell.net/#/url , điều này sẽ tạo ra một fiddle mới), fiddle này sẽ không hoạt động trong các trình duyệt không hỗ trợ lịch sử js (sẽ không hoạt động trong IE <10)

Chỉnh sửa:
Như đã chỉ ra trong các nhận xét của @Naresh và @DavidTchepak, $locationProvidercũng cần được định cấu hình đúng cách: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

— TheSharpieOne
nguồn
3
Như Naresh đã đề cập, $locationProvidercũng cần phải được cấu hình đúng cách: code.angularjs.org/1.2.23/docs/guide/... (Điều này vấp tôi lên Hy vọng rằng các liên kết tiết kiệm người khác một thời gian..)
— David Tchepak
2
Để định cấu hình nhà cung cấp vị trí, bạn cần: window.app.config ['$ locationProvider', ($ locationProvider) -> $ locationProvider.html5Mode true] Bạn cũng cần một thẻ cơ sở trong tệp HTML: <base href = "/">
— Amin Ariana
Cảm ơn vì đã đăng ký và các mẹo hữu ích, chỉ cần chia sẻ trường hợp của tôi. Tôi tạo một hằng số được gọi là userConfig và đặt mọi thứ vào bên trong, một số cài đặt có thể được ghi đè bằng chuỗi truy vấn để người dùng linh hoạt. Tôi sử dụng điều này và đặt truy vấn trong một biến phạm vi globalController nằm trong thẻ HTML để bất kỳ bộ điều khiển con nào cũng có thể nhận tham số bao gồm cả dịch vụ. Vì userConfig cũng được đưa vào Dịch vụ. Vì vậy, chúng có thể tương tác với nhau.
— simongcc
Tôi thấy dễ dàng hơn khi chỉ sử dụng một hàm js, $ location.search () có nhiều phần chuyển động. Có rất nhiều ví dụ về mã để lấy tham số chuỗi truy vấn.
— nuander
@TheSharpieOne nếu bạn có thời gian, bạn có thể xem qua câu hỏi này không? stackoverflow.com/questions/43121888/…
— Leon Gaban,
48

Nếu bạn chỉ cần xem chuỗi truy vấn dưới dạng văn bản, bạn có thể sử dụng: $window.location.search

— andersh
nguồn
11
Làm thế nào đây không phải là một câu trả lời? Có lẽ nó là một chút ngắn, nhưng nó không có vẻ để trả lời câu hỏi.
— Léo Lam
Nếu bạn kiểm tra dấu thời gian, câu trả lời đã được chỉnh sửa 2 giờ sau bình luận của Dan. Nó thực sự không quan trọng lắm, nhưng tôi thấy thật sốc khi bình luận của leo đã được ủng hộ nên tôi nghĩ rằng tôi sẽ chỉ ra nó.
— Bill Tarbell,
39

$location.search()trả về một đối tượng, bao gồm các khóa là biến và giá trị là giá trị của nó. Vì vậy: nếu bạn viết chuỗi truy vấn của mình như thế này:

?user=test_user_bLzgB

Bạn có thể dễ dàng nhận được văn bản như vậy:

$location.search().user

Nếu bạn không muốn sử dụng khóa, giá trị như? Foo = bar, tôi khuyên bạn nên sử dụng băm #test_user_bLzgB,

và gọi 

$location.hash()

sẽ trả về 'test_user_bLzgB' là dữ liệu bạn muốn truy xuất.

Thông tin bổ sung:

Nếu bạn đã sử dụng phương thức chuỗi truy vấn và bạn nhận được một đối tượng trống với $ location.search (), có thể là do Angular đang sử dụng chiến lược hashbang thay vì html5 ... Để nó hoạt động, hãy thêm cấu hình này vào mô-đun 

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
— alejandrociatti
nguồn
13

Trước tiên, hãy làm cho định dạng URL chính xác để lấy chuỗi truy vấn, sử dụng #? Q = string phù hợp với tôi

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

Chèn dịch vụ vị trí $ vào bộ điều khiển

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Vì vậy, đặt ra phải là abcd

— MasoodUrRehman
nguồn
10

bạn cũng có thể sử dụng cái này

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 Crasta
nguồn
3
Bạn đã sao chép hàm đó từ một câu trả lời SOF khác ... tốt nhất hãy tham khảo nguồn của bạn.
— arcseldon
Đúng, đây là những gì tôi sử dụng, lấy nó từ đâu đó trên SO
— nuander
10

Nếu là của bạn $location.search() không hoạt động, hãy đảm bảo bạn có những thứ sau:

1) html5Mode(true)được định cấu hình trong cấu hình mô-đun của ứng dụng

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

2) <base href="https://stackoverflow.com/">có trong HTML của bạn

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

Người giới thiệu:

  1. cơ sở href = "/"
  2. html5Mode
— Mahesh
nguồn
"html5Mode (true) được định cấu hình trong cấu hình mô-đun của ứng dụng" - giải thích
— 15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett - Xin lỗi, tôi muốn nói rằng nó được định cấu hình trong phương thức cấu hình của một đối tượng ứng dụng góc cạnh. Ví dụ: nó là: var appModule = angle.module ('myAppModule', []);
— Mahesh
Cảm ơn, tôi là khá mới để kiễu góc
— 15ee8f99-57ff-4f92-890c-b56153
Vâng, điều đó rất quan trọng, phải đối mặt với cùng một vấn đề
— Bahadir Tasdemir
7

Angular không hỗ trợ loại chuỗi truy vấn này.

Phần truy vấn của URL được cho là & chuỗi các cặp khóa-giá trị được phân tách, do đó hoàn toàn có thể diễn giải như một đối tượng.

Không có API nào để quản lý các chuỗi truy vấn không đại diện cho tập hợp các cặp khóa-giá trị.

— viết lại
nguồn
0

Trong ví dụ NodeJS của tôi, tôi có một url "localhost: 8080 / Lists / list1.html? X1 = y" mà tôi muốn duyệt và lấy các giá trị.

Để làm việc với $ location.search () để có x1 = y, tôi đã thực hiện một số điều

  1. nguồn tập lệnh thành angle-route.js
  2. Chèn 'ngRoute' vào phần phụ thuộc của mô-đun ứng dụng của bạn
  3. Định cấu hình vị trí của bạn
  4. Thêm thẻ cơ sở cho $ location (nếu bạn không có, tìm kiếm của bạn (). X1 sẽ không trả lại gì hoặc không được xác định. Hoặc nếu thẻ cơ sở có thông tin sai, trình duyệt của bạn sẽ không thể tìm thấy các tệp của bạn bên trong script src mà .html nhu cầu của bạn. Luôn mở nguồn xem của trang để kiểm tra vị trí tệp của bạn!)
  5. gọi dịch vụ định vị (search ())

list1.js của tôi có

    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();
    });

và list1.html của tôi có

<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>

Hướng dẫn: https://code.angularjs.org/1.2.23/docs/guide/$location

— Jenna Leaf
nguồn
0

Cách khắc phục của tôi đơn giản hơn, tạo một nhà máy và triển khai dưới dạng một biến. Ví dụ

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>
Mở rộng đoạn mã

— Ivan Băn khoăn
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.