gpt4 book ai didi

javascript - 如何使用相同的 HTML 通过不同的 url 呈现不同的内容?

转载 作者:行者123 更新时间:2023-11-30 20:36:00 26 4
gpt4 key购买 nike

我有一个 HTML 页面和多个 URL,如下所示

var app = angular.module('app', []);

app.controller('index', ($scope,$http) => {
$http.get('/get_js').then((res) => {
$scope.cat = res.data;
}, () => {
alert('database error');
});
});
  • /get_js

  • /get_node

  • /get_ng

  • ......

我希望如果我查询不同的 url,例如 $http.get('/get_js')$http.get('/get_node')$http.get('/get_ng') 它将在相同的 HTML 上呈现不同的内容。

例如,我有几个链接。如果我点击“a”链接,HTML 将通过“/get_js”呈现一些内容。如果我单击“b”链接,HTML 将通过“/get_ng”等呈现一些内容。每次,我都会点击一个链接。

谁能告诉我该怎么做?

非常感谢!

PS:我正在使用快速服务器来托管内容。

最佳答案

然后你可以拿一个function并做出适当的apilink is clicked 时调用该函数通过发送参数。

步骤:

  1. Write a funciton which calls each api dynamically depending on the parameter.
  2. Send the api url as a parameter from the respective anchot tag to that function.
  3. Make the api call in that function and show the response in html

这是函数的外观,我评论了你的 API打电话。

 $scope.linkClicked = function(link)
{
// $http.get('/get_js').then((res) => {
// $scope.data = res.data;
// }, () => {
// alert('database error');
// });
$scope.data = link + ' clicked';
}

代码:

var app = angular.module('myApp', []);
app.controller('index', function($scope) {
$scope.linkClicked = function(link)
{
// $http.get('/get_js').then((res) => {
// $scope.data = res.data;
// }, () => {
// alert('database error');
// });
$scope.data = link + ' clicked';
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="index">

<a ng-click="linkClicked('get_js')"> Link1 </a>
<a ng-click="linkClicked('get_node')"> Link2 </a>
<a ng-click="linkClicked('get_ng')"> Link3 </a>

<p ng-if="data"> {{data}} </p>

</div>


</body>
</html>

请运行上面的片段

Here is a working DEMO

关于javascript - 如何使用相同的 HTML 通过不同的 url 呈现不同的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49828794/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com