0

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?

Žilvinas
  • 151
  • 15
  • 1
    You can create a POST method route in your express app and hit that POST api from client page with an ajax call using jquery. – Ravi Kumar Apr 01 '17 at 02:12
  • Could you give me very simple expample? I've tried googling it but all examples are very complex with js objects and not exactly the same what I was looking for – Žilvinas Apr 01 '17 at 02:31
  • Related: [Express js form data](https://stackoverflow.com/questions/24800511/express-js-form-data). Also, see [`req.body`](http://expressjs.com/en/4x/api.html#req.body)'s documentation. – Jonathan Lonowski Apr 01 '17 at 02:33

2 Answers2

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
    // ...
})

.....
Thai Duong Tran
  • 2,453
  • 12
  • 15
  • It works to making request for the server however, I've been trying to test it but even if I do data: { your_data: "test" } in client and console.log(req.body.your_data) in the server endpoint console always show undefined – Žilvinas Apr 01 '17 at 18:28
1

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.

Ravi Kumar
  • 445
  • 4
  • 13
  • I've tried this but I'm getting this error: XMLHttpRequest cannot load http://localhost:3000/example-route. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – Žilvinas Apr 01 '17 at 17:49
  • It means that POST request must come from the same site to which it is sending data. In browser address bar are you accessing 127.0.0.1:3000 or localhost:3000? Whatever it is, it should be same in your browser address bar and onclick listener code. – Ravi Kumar Apr 01 '17 at 18:03
  • I'm not hosting my client app anywhere is it possible to do this without running it on the same server? – Žilvinas Apr 01 '17 at 18:44
  • You can add `res.header("Access-Control-Allow-Origin", "*")` before sending response in POST route. – Ravi Kumar Apr 01 '17 at 18:49