用express server打开新的html页面

Question

I have a login page with 2 buttons. 我有一个带2个按钮的登录页面。 I want that when I click on the register button, a new html page (register.html) will open. 我希望当我点击注册按钮时，会打开一个新的html页面（register.html）。 All the files are located in the same folder. 所有文件都位于同一文件夹中。

What I tried so far: My index.html file (main page): 到目前为止我尝试了什么：我的index.html文件（主页）：

<!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: 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: Javascript文件：

function RegisterUser() {
    $.get("/register", function(res){

    });
}

And there is also the register,html file which I want to open after click. 还有我想在点击后打开的寄存器，html文件。 I tried to create a "RegisterUser()" function on the JS file that calls to get function on the server. 我试图在JS文件上创建一个“RegisterUser（）”函数，该函数调用服务器上的get函数。 I'm kind of new in all the node.js, express server world. 我是所有node.js中的新手，表达服务器世界。 Please correct me if it isn't the right way to do this. 如果这不是正确的方法，请纠正我。

Thanks! 谢谢！

Answer 1

I want that when I click on the register button, a new html page (register.html) will open 我希望当我点击注册按钮时，会打开一个新的html页面（register.html）

You are making an Ajax request and then doing nothing with the data the server sends. 您正在发出Ajax请求，然后对服务器发送的数据不执行任何操作。

If you want to open a new page … just use a link. 如果您想打开新页面...只需使用链接即可。

<a href="/register">Login</a>

Answer 2

If you simply want to redirect the user to another page without using an <a> element, you can use javascript! 如果您只是想在不使用<a>元素的情况下将用户重定向到另一个页面，则可以使用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. 有两种方法可以做到这一点，一种是模拟用户点击<a>标签，然后创建新链接，另一种模拟http重定向。

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: 如果要模拟http重定向：

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. 注意，这只适用于前端脚本而不需要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. 如果你想让它在后端工作，那么你将需要另一个名为socket.io的node.js插件。 With socket you can allow the client to call upon the server to perform functions. 使用套接字，您可以允许客户端调用服务器来执行功能。 You can read more about it here: socket.io 你可以在这里阅读更多相关信息： 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. 我不认为使用托管服务器的server.js文件也可以在前端执行客户端的功能。 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. 我通常有两个文件， index.js是我的服务器文件，是node.js读取的，然后我有client.js ，这是发送给客户端的。 It just helps keep things a bit more simple. 它只是帮助使事情变得更简单。

Answer 3

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. 您可以只更改注册按钮的onClick属性以将浏览器定向到注册页面，然后您的js服务器将发送html文件。

<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! 如果您没有在本地运行应用程序，请将localhost替换为您的IP，希望这会有所帮助！

用express server打开新的html页面

问题描述

3 个解决方案

解决方案1
1 2016-08-14 19:59:21

解决方案2
0 2016-08-14 20:04:56

解决方案3
-1 2016-08-14 20:06:54

用express server打开新的html页面

问题描述

3 个解决方案

解决方案1 1 2016-08-14 19:59:21

解决方案2 0 2016-08-14 20:04:56

解决方案3 -1 2016-08-14 20:06:54

解决方案1
1 2016-08-14 19:59:21

解决方案2
0 2016-08-14 20:04:56

解决方案3
-1 2016-08-14 20:06:54