Open new html page with express server
Question
I have a login page with 2 buttons. I want that when I click on the register button, a new html page (register.html) will open. All the files are located in the same folder.
What I tried so far: My index.html file (main page):
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="CSS.css">
<script src="JS.js"></script>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="login">
User Name:<br>
<input type="text" id="username"><br>
Password:<br>
<input type="password" id="password"><br><br>
<input type="button" onclick="loginUser()" value="Login"></button>
<input type="button" onclick="RegisterUser()" value="Register"></button>
</div>
</body>
</html>
server.js:
var express = require('express');
var lastResult = '';
var app = express();
var path = require('path');
var bodyParser = require('body-parser');
app.use(bodyParser());
app.use(express.static(path.join(__dirname + '/')));
app.get('/register',function(req,res){
res.sendFile('/register.html');
});
app.listen(3000);
Javascript file:
function RegisterUser() {
$.get("/register", function(res){
});
}
And there is also the register,html file which I want to open after click. I tried to create a "RegisterUser()" function on the JS file that calls to get function on the server. I'm kind of new in all the node.js, express server world. Please correct me if it isn't the right way to do this.
Thanks!
3 answers
solution1
1 2016-08-14 19:59:21
I want that when I click on the register button, a new html page (register.html) will open
You are making an Ajax request and then doing nothing with the data the server sends.
If you want to open a new page … just use a link.
<a href="/register">Login</a>
solution2
0 2016-08-14 20:04:56
If you simply want to redirect the user to another page without using an <a> element, you can use javascript!
There are two ways to do this, one simulates the user clicking on an <a> tag and then creates the new link, the other one simulates a http redirect.
The bonus to simulating a user click is that the user can then use the back and forward buttons of their browser to navigate between pages.
Here is how to simulate a click:
window.location.href = 'your link'
If you want to simulate a http redirect:
window.location.replace('your link')
If you want to get files off of your local server (folder) then simply call upon that file, it would look like this:
window.location.replace('register.html`)
Note, this only works with a front-end script without the need of jQuery. If you want this to work in the back-end, then you are going to require another plugin for node.js called socket.io. With socket you can allow the client to call upon the server to perform functions. You can read more about it here: socket.io
I do not think it is a good idea to use your server.js file which is hosting the server to also perform functions for the client in the front-end. I usually have two files, index.js which is my server file and is what node.js reads, and then I have client.js which is what is sent to the client. It just helps keep things a bit more simple.
solution3
-1 2016-08-14 20:06:54
You could just change the onClick property of the register button to direct the browser to the register page, your js server would then send the html file.
<input type="button" onclick="window.open('http://localhost:3000/register')" value="Login"></button>
The above will open it in a new tab, to redirect from the current tab use:
<input type="button" onClick="location.href='http://localhost:3000/register'" value="Login"></button>
Replace localhost with your IP if you are not running the app locally, hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.