How to load the same html but with different data and with different urls using html/javascript?
NickName:Emelie Ask DateTime:2019-07-24T14:00:32

How to load the same html but with different data and with different urls using html/javascript?

I've built a website using no front-end framework, but html/css and javascript only. I have a page portfolio.html with two google charts. My wish is to have all urls of the format www.mydomain.se/portfolio/param1=something&something&something/param2=something&something&something... (or similar) display the portfolio.html page. The charts will be served with different data depending on the url from an express backend. I know how to achieve this using a frontend framework such as Vue.js but am wondering how to achieve this using only html and javascript.

So how do I make all requests to www.mydomain.se/portfolio/param1=something&something&something/param2=something&something&something... (or similar) show my portfolio.html page with different data using only html and javascript?

I have looked around and know that you can change the url after loading a page to make it look like a different page is served for multiple urls but that's not really what I want to do.

Copyright Notice：Content Author:「Emelie」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/57176188/how-to-load-the-same-html-but-with-different-data-and-with-different-urls-using

Answers
Shubham Dixit 2019-07-24T06:09:44

Considering your url would be www.mydomain.se/portfolio?param1=something\n\nYou can do something like this ,render different templates according to query params\n\napp.get('/portfolio', function(req, res) {\n\nif(req.query.param1==\"template1\")\n{\nres.render(\"template1\",{data:data1});\n}\nelse if(req.query.param1==\"template2\")\n {\nres.render(\"template2\",{data:data2});\n}\n});\n\n\nYou can also use request params like this\n\napp.get('/portfolio/:param1', function(req, res) {\n\n if(req.params.param1==\"template1\")\n {\n res.render(\"template1\",{data:data1});\n }\n else if(req.params.param1==\"template2\")\n {\n res.render(\"template2\",{data:data2});\n }\n });\n",

Products recommended by Amazon
More >>>
SanDisk 128GB microSDXC-Card, Licensed for Nintendo-Switch - SDSQXAO-128G-GNCZN
SanDisk 128GB microSDXC-Card, Licensed for Nintendo-Switch - SDSQXAO-128G-GNCZN
 HUANUO Dual Monitor Stand - Adjustable Spring Monitor Desk Mount Swivel Vesa Bracket with C Clamp, Grommet Mounting Base for 13 to 27 Inch Computer Screens - Each Arm Holds 4.4 to 14.3lbs
HUANUO Dual Monitor Stand - Adjustable Spring Monitor Desk Mount Swivel Vesa Bracket with C Clamp, Grommet Mounting Base for 13 to 27 Inch Computer Screens - Each Arm Holds 4.4 to 14.3lbs
 AMD Ryzen 5 5600X 6-core, 12-Thread Unlocked Desktop Processor with Wraith Stealth Cooler
AMD Ryzen 5 5600X 6-core, 12-Thread Unlocked Desktop Processor with Wraith Stealth Cooler
 Timberland Men's 6-Inch Premium Waterproof Boot
Timberland Men's 6-Inch Premium Waterproof Boot
More about “How to load the same html but with different data and with different urls using html/javascript?” related questions
How to load the same html but with different data and with different urls using html/javascript?

I've built a website using no front-end framework, but html/css and javascript only. I have a page portfolio.html with two google charts. My wish is to have all urls of the format www.mydomain.se/

Show Detail
How to detect and load different html pages on different phones

I have to build a mobile web application but it has to look different for each phone. For iPhone I need to load a different html file, same goes for android. And for some phones that don't even sup...

Show Detail
How to use the same HTML render different content via different urls?

I have an HTML page and multiple URLs as follows var app = angular.module('app', []); app.controller('index', ($scope,$http) => { $http.get('/get_js').then((res) => { $scope.cat =

Show Detail
same ID for two different html element

I want to develop a web application in html where I will have various designs of html templates. Now somewhere the criteria is that I will have same pages with different data. The pages between

Show Detail
join HTML segments from different origins and load correctly in a browser

I want to join HTML segments from several different origins and then load the joint one correctly in a browser. For example, one HTML segment excerpted from www.1_example.com/1 might contain <i...

Show Detail
How to load different HTML file to create different scenes/VR worlds?

I'm trying to create a webvr application where one can go in and then be able to navigate to different VR worlds/scenes. I've learned that I cannot have more than one scene in aframe, so I was wond...

Show Detail
js: Load html of a page from a different domain

I was wondering how can I load HTML, which is hosted on a different domain? I am using JavaScript, and want to create a bookmarklet that will enable me to parse the external HTML. I have been goo...

Show Detail
Dynamic HTML using Javascript: Fill same HTML object with different contents

This is the general question: Which is the best solution when there is an HTML object to fill in different ways depending on DOM events? This is my case in particular: I have a navbar where each ...

Show Detail
Changing javascript var in processingjs & load different txt file int html depends on the var

This two question is happend in the same html. I have a .pde file will detect user mouse click, and there are few object in it, if the user click on the first one, I will get '1' as output and so ...

Show Detail
Load a div from a different html file in the same domain

I would like to load a div from a different html file in the same domain. How can I do that with jquery? Here below it is my example but it doesn't work. In the past I have used .load() but now it...

Show Detail