Question

作为学习node.js服务器的一部分，我正在一个小的登录网站上工作。您可以打开一个站点并输入您的用户名，然后将其通过ajax发布请求发送到服务器，并保存到所有用户的数组中。我想这样做，以便在提交用户名后，您将被重定向到另一个页面，该页面对于每个用户名都是唯一的，您可以在其中看到有关用户名的信息。有点像“管理您的帐户”网站。

但是，在提交用户名后，我似乎找不到一种将我重定向到此页面的方法。

例如，您提交一个用户名“ kokot”，这是到目前为止已提交的第三个用户名。因此，在“玩家”数组中，您的用户对象将类似于{id: 2, username: 'kokot'}。现在，我想将您重定向到URL localhost:2000/players/2，以查看有关您的特定用户名的信息。

NODE JS

const express = require('express');
const server = express();
const bodyParser = require('body-parser');

server.use(bodyParser.urlencoded({extended: false}));
server.use(bodyParser.json());

let players = [];

//loads the home page
server.get('/', (req, res) =>{
    res.sendFile(__dirname + '/home.html');
});

//loads the page with the list of players
server.get('/players', (req, res) =>{
    res.send(players);
});

server.get('/player/:id', (req, res) =>{
    res.send(players[req.params.id]);
});

//takes a new username and saves it to players array
server.post('/', (req, res) =>{
    console.log('NEW PLAYER: ' + req.body.username);

    players.push({
        id: players.length,
        username: req.body.username
    });
});








/////////////////////////////////////////////////////////////////////////////
server.listen(2000, () => console.log('LISTENING ON PORT 2000'));

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Home</title>
</head>
<body>

    <h1>PISKVOREC</h1>

    <form id="userForm">
        username
        <input type="text" name="text" id="userFormInput">
        <input type="submit" name="Submit" id="userFormSubmit">
    </form>


<script>
    $(document).ready(()=>{

        let homeUrl = 'http://localhost:2000';

        let $userForm = $('#userForm');
        let $userFormSubmit = $('#userFormSubmit');


        //submits a new username to the server
        $userFormSubmit.click(() =>{
            $.post(homeUrl, {
                username: $('#userFormInput').val()
            }, function(){
                console.log('USERNAME SUBMITTED TO SERVER');
            });

            $.
        });
////////////////////
    });
</script>
</body>
</html>

谢谢您的回应和想法

祝你愉快

Answer 1

好的，请参见下文：

server.post('/', (req, res) =>{
    console.log('NEW PLAYER: ' + req.body.username);

    players.push({
        id: players.length,
        username: req.body.username
    });

    res.redirect(`/player/${req.body.username}`);
});

更新使用Vanilla Express.js应用进行演示

app.js

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

app.post('/this', (req, res, next) => {
  res.redirect(`/that/${req.body.username}`);
});

app.get('/that/:id', (req, res, next) => {
  res.send(req.params);
});

module.exports = app;

index.hbs

<form method="post" action="/this">
    <input id="username" name="username" value="vader" type="text" />
    <button type="submit">Submit</button>
</form>

导致重定向到：http://localhost:3000/that/vader

发布请求后重定向到另一个网址（AJAX，EXPRESS）

1 个答案: