如何將變量從客戶端傳遞到Express api

我完全不熟悉node.js並表達。我已經在我的客戶端頁面上用JavaScript做了一些計算，我想將生成的數字數組發送到我的node.js服務器應用程序。當我不得不發送表單數據時，我只是將表單動作用於我的路線。現在我完全迷失了，不知道從哪裏開始。我應該在我的路由中寫入哪些代碼以及如何從我的客戶端應用程序將js變量或數組傳遞給它？如何將變量從客戶端傳遞到Express api

來源

2017-04-01 Žilvinas

您可以在快速應用程序中創建POST方法路線，並使用jquery通過ajax調用從客戶端頁面中打開POST api。 –

你能給我很簡單的expample嗎？我嘗試了谷歌搜索它，但所有的例子是非常複雜的JS對象，而不是完全一樣我正在尋找 –

相關：[Express js表單數據]（https://stackoverflow.com/questions/24800511/express-js - 形式數據）。另請參閱['req.body']（http://expressjs.com/en/4x/api.html#req.body）的文檔。 –

向您的服務器上運行的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 
    // ... 
}) 

.....

來源

2017-04-01 02:43:24

然而，它一直在試圖對服務器做出請求，但我一直在嘗試測試它，但即使我在客戶端和服務器中的console.log（req.body.your_data）中執行了數據{your_data：「test」}端點控制檯總是顯示undefined –

簡單示例

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!

本網頁包括來自CDN jQuery和onclick事件使一個POST請求到服務器。

來源

2017-04-01 03:25:23

我試過這個，但我得到這個錯誤：XMLHttpRequest無法加載http：// localhost：3000/example-route。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。 –

這意味着POST請求必須來自它發送數據的同一個站點。在瀏覽器地址欄中你訪問127.0.0.1:3000或localhost：3000？不管它是什麼，在瀏覽器地址欄和onclick監聽器代碼中都應該相同。 –

我沒有託管我的客戶端應用程序在任何地方都可以做到這一點，而無需在同一臺服務器上運行它？ –

如何將變量從客戶端傳遞到Express api

回答

相關問題