繁体   English   中英

用express server打开新的html页面

[英]Open new html page with express server

我有一个带2个按钮的登录页面。 我希望当我点击注册按钮时,会打开一个新的html页面(register.html)。 所有文件都位于同一文件夹中。

到目前为止我尝试了什么:我的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:

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文件:

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

    });
}

还有我想在点击后打开的寄存器,html文件。 我试图在JS文件上创建一个“RegisterUser()”函数,该函数调用服务器上的get函数。 我是所有node.js中的新手,表达服务器世界。 如果这不是正确的方法,请纠正我。

谢谢!

我希望当我点击注册按钮时,会打开一个新的html页面(register.html)

您正在发出Ajax请求,然后对服务器发送的数据不执行任何操作。

如果您想打开新页面...只需使用链接即可。

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

如果您只是想在不使用<a>元素的情况下将用户重定向到另一个页面,则可以使用javascript!

有两种方法可以做到这一点,一种是模拟用户点击<a>标签,然后创建新链接,另一种模拟http重定向。

模拟用户点击的好处是用户可以使用其浏览器的后退和前进按钮在页面之间导航。

以下是模拟点击的方法:

window.location.href = 'your link'

如果要模拟http重定向:

window.location.replace('your link')

如果你想从本地服务器(文件夹)获取文件,那么只需调用该文件,它将如下所示:

window.location.replace('register.html`)

注意,这只适用于前端脚本而不需要jQuery。 如果你想让它在后端工作,那么你将需要另一个名为socket.io的node.js插件。 使用套接字,您可以允许客户端调用服务器来执行功能。 你可以在这里阅读更多相关信息: socket.io

我不认为使用托管服务器的server.js文件也可以在前端执行客户端的功能。 我通常有两个文件, index.js是我的服务器文件,是node.js读取的,然后我有client.js ,这是发送给客户端的。 它只是帮助使事情变得更简单。

您可以只更改注册按钮的onClick属性以将浏览器定向到注册页面,然后您的js服务器将发送html文件。

<input type="button" onclick="window.open('http://localhost:3000/register')" value="Login"></button> 

以上将在新选项卡中打开它,从当前选项卡重定向使用:

<input type="button" onClick="location.href='http://localhost:3000/register'" value="Login"></button>

如果您没有在本地运行应用程序,请将localhost替换为您的IP,希望这会有所帮助!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM