javascript - 访问URL参数-PHP和Angular.js

原文 标签 javascript php angularjs

Accessing URL parameters - PHP & Angular JS

So my website is PHP for the backend and AngularJS for the frontend. Weird that I'm finding that I have to use PHP on the frontend to achieve some things like getting URL paramters. Explanation below;

Given the following URLs for example

http://www.test.co.uk/search-menu/1/cinamon-soho
http://www.test.co.uk/search-restaurant?location=asokoro&day=today&time=1100

My Angular code in the same page requires the parameters location, day etc. Right now I'm having to use the line below to pass them to angular

$scope.l = <?php echo json_encode($_GET['location']); ?>;

My questions are;

  1. Is there a way to access these variables using just Angular so I can take PHP out of the equation?
  2. If question 1 is possible, how can I do the same if I then decide to move my Angular code away from that page to a dedicated .js page that I reference using

<script src="http://www.test.co.uk/js/main.js"></script>

FYI

The website was not built from the ground up using AngularJS. Angular was later introduced to the frontend heavy lifting PHP was doing so the website is not a SPA. There's no angular routing in place.

Thanks.

Answer

I would use a function like below

function fetchGetVariables() {
  var loc = "http://www.test.co.uk/search-restaurant?location=asokoro&day=today&time=1100";
  // var loc = window.location.href; // Use this in actual use
  var result = {};

  var parts = loc.split("?");

  if (parts.length > 0) {
    var params = parts[1].split("&");

    for (var i = 0; i < params.length; i++) {
      var keyValuePair = params[i].split("=");

      var key = keyValuePair[0];
      var value = "";
      if (keyValuePair.length > 0) {
        value = keyValuePair[1];
      } 

      result[key] = value;
    }
  }

  return result;
}

console.log(fetchGetVariables());

This gives the output:

Object {location: "asokoro", day: "today", time: "1100"}

See it at this fiddle.

翻译

所以我的网站是用于后端的PHP和用于前端的AngularJS。很奇怪,我发现我必须在前端使用PHP才能实现某些功能,例如获取URL参数。以下说明;

以以下网址为例

http://www.test.co.uk/search-menu/1/cinamon-soho
http://www.test.co.uk/search-restaurant?location=asokoro&day=today&time=1100


我在同一页面中的Angular代码需要参数位置,日期等。
现在我必须使用下面的线将它们传递到

$scope.l = <?php echo json_encode($_GET['location']); ?>;


我的问题是;


有没有一种方法可以仅使用Angular访问这些变量,这样我就可以摆脱PHP的困扰了?
如果可能出现问题1,然后决定将Angular代码从该页面移到我参考使用的专用.js页面,该怎么做?


<script src="http://www.test.co.uk/js/main.js"></script>

费耶

该网站不是使用AngularJS从头开始构建的。后来将Angular引入前端,PHP这样做很繁琐,因此该网站不是SPA。没有适当的角度布线。

谢谢。
最佳答案
我将使用如下功能

function fetchGetVariables() {
  var loc = "http://www.test.co.uk/search-restaurant?location=asokoro&day=today&time=1100";
  // var loc = window.location.href; // Use this in actual use
  var result = {};

  var parts = loc.split("?");

  if (parts.length > 0) {
    var params = parts[1].split("&");

    for (var i = 0; i < params.length; i++) {
      var keyValuePair = params[i].split("=");

      var key = keyValuePair[0];
      var value = "";
      if (keyValuePair.length > 0) {
        value = keyValuePair[1];
      } 

      result[key] = value;
    }
  }

  return result;
}

console.log(fetchGetVariables());


这给出了输出:

Object {location: "asokoro", day: "today", time: "1100"}


this小提琴上查看。
相关推荐

javascript - 无法弄清楚为什么我的网站占用了iPhone的一半屏幕

javascript - 刷新Bing Maps API内容

javascript - 我应该在HTML中添加什么以确保用户获得页面的最新版本,而不是旧版本?

javascript - 如何以正确的方式在Angle App中的控制器之间共享数据

javascript - 给JavaScript文件一个不同的扩展名。

javascript - 从服务器获取脚本位置

javascript - 根据定位运行不同的功能

javascript - 处理多个onClick事件jQuery

javascript - JQVMap-悬停时Ajax调用,标签问题

javascript - 使用nextpagetoken在Google Apps脚本查询中提取500多个结果