如何根据多个URL，在多个URL上使用同一HTML页面，但一个变量的值取决于所查询的URL？

Question

我有一个HTML页面，如下所示

<body ng-controller="DashboardDisplay" onload="submit()">
    <div class="container-fluid" >

        {{scope.arr}}
    </div>
</body>
<script>

var myApp = angular.module('myApp',[]);
myApp.controller('DashboardDisplay', ['$scope','$http',function($scope,$http) {

    $scope.submit = function(){
        var jsonOb = {"A":"B"};
        $http.post(URL,jsonOb).
        success(function(response) {
            console.log('got it' + response);
            $scope.arr=response;
        })
    }
    }]);

目前，我正在对变量jsonOb的值进行硬编码。 对于不同的页面，除了jsonOb的值之外，整个HTML保持不变。 例如，如果我查询www.xyz.com/page1.html则值为jsonOb={"A":"B"}但对于www.xyz.com/page2.html则值为jsonOb={"1":"2"} 。 除此之外，这两个HTML页面是相同的，即我正在使用两个单独的HTML页面，即page1.html和page2.html只是设置一个变量的值，我认为这很多余。

我希望能够根据查询的URL设置此变量的值。 我怎样才能做到这一点？

PS：我正在使用快递服务器托管内容。

Answer 1

您可以将所有json数据存储到.json文件中，然后查找window.location对象的hash属性以查询良好的对象：对于此示例，假设您有file1.json，file2.json等。

var hash = window.location.hash;
var jsonPage;
if ( hash.length ) {
     jsonPage = hash.split('#')[1]
     }
else {
     jsonPage = 1;
     }

现在，您可以根据html文件名（即your_url/page.html#2之后的值调用json页面：

var xhr;
if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
else if (window.ActiveXObject) xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
if(!xhr){
    checkOldBro(true); 
    return;
    }
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
        var jsonOb = JSON.parse(xhr.responseText);
        $scope.submit = function(){...your function}
        }
    };
xhr.open("GET", "file"+jsonPage+".json", true);
xhr.send();
})(this);

请注意，您还可以检查hashchange事件，该事件不会刷新页面。

如何根据多个URL，在多个URL上使用同一HTML页面，但一个变量的值取决于所查询的URL？

问题描述

1 个解决方案

解决方案1
1 2015-05-16 13:00:39

如何根据多个URL，在多个URL上使用同一HTML页面，但一个变量的值取决于所查询的URL？

问题描述

1 个解决方案

解决方案1 1 2015-05-16 13:00:39

解决方案1
1 2015-05-16 13:00:39