Question

我有一个nodejs应用程序，可充当Cmus音乐播放器的遥控器。它使用每个函数的路由，即/ play / next等。这样可以正常工作，但是每按一次按钮我都必须调用res.redirect("index.html")，这显然会导致页面重新加载。如何执行此操作以便每次单击按钮仍然能够将命令发送到服务器但不重新加载页面？

server.js

var express = require('express');
var app = express();
var path = require('path');
var exec = require('child_process').exec;
var Commands = require('./commands.js');
var child;

app.use(express.static(__dirname + '/public'));

//Routes
app.get('/', function (req, res){
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.get('/play', function(req, res){
    // console.log(req);
    handleCommand(Commands.PAUSE);
    res.redirect("index.html");
});

var server = app.listen(8080, function () {
    console.log("Server online");
    console.log(commands.NEXT);
});

function handleCommand(command) {
    child = exec(command, function (error, stdout, stderr) {
        // sys.print('Stdout ' + stdout);
        // sys.print('Stderr ' + stderr);
        if (error !== null) {
            console.log('ERROR: ' + error);
        }
    })
}

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cmus Remote</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="client.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body id="body">
    <form action="/play">
        <input id="play" type="submit" value="&#x23ef;">
    </form>
</table>
</body>
</html>

Answer 1

您可以将事件处理程序附加到将执行POST请求而无需重新加载页面的按钮，而不是使用表单“提交”按钮。然后，您根本不需要发送任何重定向。由于页面上有JQuery，我将以JQuery为例。

的index.html

<button id="play">Play</button>
<!-- Other code -->

<!-- Script or external JS code -->
<script>
$('#play').click(function(){
    $.post('/play');
});
</script>

Nodejs客户端按钮没有重定向

1 个答案: