从 JavaScript 发送数据到 node.js

Question

Below is the JavaScript code. How can I send the players array to node.js?

let players = [];
for(var i=0; i<22; i++){
  players.push($(".card > button").eq(i).attr("value"));
}

Below is the node.js code.

const express = require("express");
const bodyParser = require("body-parser");
const mySql = require("mySql");

const app = express();

app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));
app.set('view engine', 'ejs');

app.get("/play", function(req, res){
  res.render("PlayGame");
});

app.post("/play", function(req, res){
  res.render("PlayGame");
});

I need to catch the players array at /play route in node.js. How can I do that?

Answer 1

Yes, you can send data from the browser Javascript to your node.js app. You would use an Ajax call and use either the XMLHttpRequest API or the more modern fetch() API to send the data. You would create a route in your nodejs server such as /play and then send the data with the request. Your server will then need to parse the incoming data (depending upon how it was sent) and can then act on it.

You will also have to decide if you're sending a GET, POST or PUT request (picking what is appropriate based on typical REST design and architecture). If this is starting a game and you're sending a bunch of data with it, then you would probably use a POST request and send the data as JSON in the body of the request.

In Express, here's how you'd receive that type of data:

app.use(express.json());
app.post("/play", (req, res) => {
    console.log(req.body);          // this would be the data sent with the request
    res.send("game started");
});

In the browser, here's how you could send an array of players to your server.

fetch("/play", {
    method: "POST", 
    headers: {
       'Content-Type': 'application/json'
    },
    body: JSON.stringify(players)
}).then(response => {
    // this line of code depends upon what type of response you're expecting
    return response.text();     
}).then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
});

See the "Using Fetch" page on MDN for more info.

Answer 2

On the client side you would need something like this:

const postData = data => {
    const body = JSON.stringify(data);
    return fetch('https://your.url/play', {
        method: 'POST', // GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, same-origin
        cache: 'no-cache', // default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, omit
        headers: {
            'Content-Type': 'application/json',
        },
        redirect: 'follow', // manual, follow, error
        referrer: 'no-referrer', // no-referrer, client
        body
    })
        .then(response => response.json()) // parses JSON response into native JavaScript objects
}

const players = ['a', 'b', 'c'];

postData({data: players})
    .then(json => {
        console.log(json);
    })
    .catch(e => console.log(e));

On the server side you would need something like this:

app.use(express.json());
app.post("/play", (req, res) => {
    const players = req.body.data;
    ...
    ...
});