JavaScript - 单击按钮加载新的 html 页面

Question

我正在使用 Nodejs 运行 http 服务器。 最初，有一个带有文本条目的登录页面，您可以在其中输入昵称和一个按钮，该按钮将带您进入新的 html 页面。

该按钮将玩家及其昵称添加到玩家列表中。 但是，它不会加载新的 html 页面。

这是服务器代码：

const http = require('http');
const fs = require('fs');

console.log('running');

let player_count = 0;
let players = [];

class player
{
    constructor(id)
    {
        this.id = id;
        this.name = "";
        this.card_czar = false;
        this.cards = new Set();
        this.score = 0;
        this.selection = "";
    }

    setName(nick_name)
    {
        this.name = nick_name;
    }

    setCardCzar(czar_boolean)
    {
        this.card_czar = czar_boolean;
    }

    delCard(card_val)
    {
        this.cards.delete(card_val);
    }

    addCard(card_val)
    {
        this.cards.add(card_val);
    }

    addScore()
    {
        this.score++;
    }
}

let server = http.createServer(async (req, res) => {
    console.log(req.url);

    if (req.url == '/') {
        res.write(fs.readFileSync('../frontend/test.html'));
    }
    else if (req.url == '/login') {
        const buffers = [];

        for await (const chunk of req) {
            buffers.push(chunk);
        }

        let buffer = Buffer.concat(buffers).toString()
        const data = await JSON.parse(buffer);

        new_player = new player(player_count);
        new_player.setName(data.nickname);
        players.push(new_player);

        player_count++;

        res.write(fs.readFileSync('../frontend/cardcast.html'));

        console.log(players)
    }

    res.end();
});

server.listen(3000);

这是客户端代码：

<html>  
    <head>  
    <script type = "text/javascript">  
        async function login()
        {
            let nickname = document.getElementById('username-field').value;
            console.log(nickname);

            let url = window.location.href + 'login';
            
            let res = await fetch(url, {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({nickname})
            });
        }
    </script>  
    </head>
    <style>
        .login-form-field {
        border: none;
        border-bottom: 1px solid #3a3a3a;
        border-top: 1px solid #3a3a3a;
        margin-bottom: 10px;
        border-radius: 3px;
        outline: none;
        padding: 0px 0px 5px 5px;
        }

        #login-form-submit {
        width: 100%;
        padding: 7px;
        border: none;
        border-radius: 5px;
        color: white;
        font-weight: bold;
        background-color: #3a3a3a;
        cursor: pointer;
        outline: none;
        }
    </style>
    <body>  
        <p>Welcome To Cards Against Mill House</p>
        <div id="New Accident" class="tabcontent">
            <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Nickname">
  
            <button onclick = "login()" value = "Login">Login</button> 
        </div>
    </body>  
</html>

服务器文件位于后端文件夹中，文件 cardcast.html 位于前端文件夹中。 我希望它在玩家输入他们的昵称后加载 cardcast.html 文件，这样他们就可以开始玩游戏了。

任何帮助实现这一点将不胜感激！ 提前致谢！

Answer 1

我相信客户端代码上的res应该存储 HTML 响应。 您是否尝试过打印它以查看它的内容？

您可能想阅读这篇文章，其中介绍了如何从 fetch 响应中注入 HTML。

Answer 2

/login的服务器处理程序应该返回一个值，它确实如此。 它是文件cardcast.html的内容。 如果您查看“网络”选项卡，您会发现正在发生的事情。 该内容可能应该是 JSON，但是您对客户端的响应什么也不做。

你期待会发生什么？ 如果您想加载页面，那么您根本不需要使用 Ajax。 您需要重定向。 使用<form>标签会简化这个过程。

 // server, handle POST if (req.url == '/login') { var nickname = req.body.username new_player = new player(player_count); new_player.setName(nickname); players.push(new_player); player_count++; res.write(fs.readFileSync('../frontend/cardcast.html')); console.log(players) }

 <div id="New Accident" class="tabcontent"> <form action="/login" method="post"> <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Nickname"> <button value="Login">Login</button> </form> </div>

Answer 3

我最终通过将响应读取为文本并将 document.body.innerHTML 设置为它来解决问题。

async function login()
        {
            let nickname = document.getElementById('username-field').value;
            console.log(nickname);

            let url = window.location.href + 'login';
            
            let res = await fetch(url, {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({nickname})
            });

            let data = await res.text();

            document.body.innerHTML = data;
        }

谢谢您的帮助！

JavaScript - 单击按钮加载新的 html 页面

问题描述

3 个解决方案

解决方案1
1 2022-07-08 05:37:18

解决方案2
1 2022-07-08 06:06:32

解决方案3
0 2022-07-08 14:08:45

JavaScript - 单击按钮加载新的 html 页面

问题描述

3 个解决方案

解决方案1 1 2022-07-08 05:37:18

解决方案2 1 2022-07-08 06:06:32

解决方案3 0 2022-07-08 14:08:45

解决方案1
1 2022-07-08 05:37:18

解决方案2
1 2022-07-08 06:06:32

解决方案3
0 2022-07-08 14:08:45