如何将变量从客户端传递到Express API

Question

I've completely new to node.js and express. I've done some calculations with javascript on my client page and I want to send that generated array of numbers to my node.js server app. When I had to send form data I just used form action to my route. Now I'm totally lost and don't know where to start at. What code should I write in my route and how to pass js variable or array to it from my client app?

Answer 1

to send an array of data to the Express app running on your server, the most simple way is to send it as an JSON object. A simple example using jQuery is shown below:

Client code:

    var your_calculated_array = []; // Set your calculated array here
    $.ajax({ 
      type: 'POST', 
      url: 'YOUR_EXPRESS_ENDPOINT', 
      data: { your_data: your_calculated_data }, 
      dataType: 'json',
      success: function (data) { 
        // Handle the response here
      }
    });

Server-side code (using body-parser middleware to parse json body):

.....

var bodyParser = require('body-parser')
app.use( bodyParser.json() );   

app.post(YOUR_EXPRESS_ENDPOINT, function(req, res) {
    var calculated_data = req.body.your_data
    // ...
})

.....

Answer 2

Simple Example

app.js

var express = require('express')
var app = express()

app.set('view engine', 'pug')

app.get('/', function (req, res) {
  res.render('index')
})

app.post('/example_route', function (req, res) {
  res.send({'msg': 'Hello World!'})
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

views/index.pug

doctype html
html
  head
    title= 'HomePage'
    script(src='https://code.jquery.com/jquery-3.2.1.min.js')
  body
    button(onclick='$.post("http://localhost:3000/example_route", function(data) {alert(data.msg);})') Click me!

This homepage includes jquery from cdn and onclick event makes a POST request to your server.