クライアントからExpress apiに変数を渡す方法

Question

私は全く新しいnode.jsを公開しています。 私はクライアントのページでjavascriptを使っていくつかの計算を行っており、生成した数値の配列をnode.jsサーバーアプリケーションに送信したいと思います。フォームデータを送信しなければならないときは、フォームアクションを自分のルートに使用しました。今私は完全に失われてどこから始めるべきか分からない。私のルートにはどのようなコードを書くべきですか？クライアントアプリケーションからjs変数または配列を渡す方法は？

Answer 1

サーバー上で実行されているExpressアプリケーションにデータの配列を送信するには、最も簡単な方法はJSONオブジェクトとして送信することです。 jQueryのを使用して簡単な例を以下に示す：

クライアントコード：

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 
     } 
    }); 

サーバーサイドコード（JSON体を解析するためにボディパーサーミドルウェアを使用して）：

..... 

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

簡単な例

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!') 
}) 

ビュー/ 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! 

このホームページは、サーバーにPOST要求を行い、CDNとのonclickイベントからjqueryのを含んでいます。