Node.js通過AJAX發送數據到後端

Question

我對AJAX相當陌生，所以很抱歉有可能發生錯誤理解，但我並沒有完全通過這件事。

我正在嘗試一件簡單的事情。我有一個server.js文件，這基本上是我的後端。然後我有一個index.html和一個script.js。這就是全部，所以非常基本的設置。現在，在我的script.js上，我收到一些數據（郵件地址）。現在我想將這些數據發送到我的後端（進入server.js）以在那裏使用它。我怎樣才能做到這一點？

我發現一些關於AJAX和node.js的文章，但我不明白，特別是沒有在我的後端接收它的地方。順便說一下，我使用快遞服務器。

我在我的script.js是：

$.ajax({ 
      type: "POST", 
      url: "server.js", 
      data: { mail: mail }, 
      success: function(data) { 
      }, 
      error: function(jqXHR, textStatus, err) { 
       alert('text status '+textStatus+', err '+err) 
      } 
     }); 

右這麼遠？我現在如何收到我的server.js中的信息？

沒有太多的，到目前爲止，只是：

var express = require('express'); 

var app = express(); 
var server = app.listen(3000); 

app.use(express.static('public')); 

感謝所有幫助:)

Answer 1

注：這是問題是用代碼更新之前寫這樣的字段名和端口號I U sed這裏作爲例子可能需要用正確的值更新。

客戶端代碼 - 例如與jQuery：

$.post('/email', { address: 'xxx@example.com' }); 

（這可能需要任選的回調並將其返回可用於添加成功/錯誤處理程序一個承諾）

服務器 - 端代碼 - 例如與快遞：

const express = require('express'); 
const bodyParser = require('body-parser'); 

const dir = path.join(__dirname, 'public'); 

const app = express(); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 

app.post('/email', (req, res) => { 
    // you have address available in req.body: 
    console.log(req.body.address); 
    // always send a response: 
    res.json({ ok: true }); 
}); 

app.use(express.static(dir)); 

app.listen(4443,() => console.log('Listening on http://localhost:4443/')); 

這是假設您的靜態文件（HTML，客戶端JavaScript，CSS）是在public目錄相對於您的server.js文件。

有關JSON /形式編碼問題的背景顯示方式：

• Which method is prefer when building API

看到這個背景上提供靜態文件：

• How to serve an image using nodejs

Answer 2

這實際上相當簡單與基本路由器Express.JS來實現：

我我會給你一些縮小的代碼片段，以幫助你理解它在瀏覽器和服務器上的工作原理。

在前端

，你基本上只是想「郵報」的電子郵件地址到後端：

$.post('/email', { email: 'howareyou@xx.com' }) 

和後端（Express.JS），你應該實現基本的路由器：

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

// use: app.METHOD(PATH, HANDLER) 
app.post('/email/', function(req, res) { 
    var email = req.body.email 
}) 

在這裏閱讀更多：http://expressjs.com/en/guide/routing.html

Answer 3

在server.js補充一點：

app.post('/searching', function(req, res){ 
//do something with req 
}); 

和的script.js：

$.ajax({ 
      type: "POST", 
      url: "/searching", 
      data: { mail: mail }, 
      success: function(data) { 
      }, 
      error: function(jqXHR, textStatus, err) { 
       alert('text status '+textStatus+', err '+err) 
      } 
     }); 

Answer 4

你需要一些更多的東西居然能解析身體。將此添加到您的server.js文件中。

var bodyParser = require('body-parser'); 
var cookieParser = require('cookie-parser'); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

您需要指定一個有效的URL。由於您正在監聽3000.您還需要在服務器上指定一個路由作爲端點。

$.ajax({ 
      type: "POST", 
      url: "http:localhost:3000/", 
      data: { mail: mail }, 
      success: function(data) { 
      }, 
      error: function(jqXHR, textStatus, err) { 
       alert('text status '+textStatus+', err '+err) 
      } 
     }); 

現在您需要在服務器上添加路由。您可以通過在所有的app.use的加入給你的server.js文件，這樣做的呼籲

app.post("/", function(req, res){ 
    // your logic here 
    res.send("I am sending something back!"); 

}) 

Answer 5

首先，你需要一個有效的路由服務器運行時命中。您可以通過快遞在server.js中完成此操作。

var express = require('express'); 
var bodyParser = require('body-parser'); 
var app = express(); 

app.use(bodyParser.json()); 
app.use(express.static('public')); 

app.post('/mail', function(req, res) { 
    var body = req.body; 

    console.log('email', body.email); 

    res.json({ message: 'I got the email!' }); 
}); 

var server = app.listen(3000); 

通知我在明確的中間件帶來了將解析機構JSON，並使其可在req對象req.body下。您將需要安裝此依賴關係npm install --save body-parser。

然後，您需要從前端向該URL發送POST請求。現在

$.ajax({ 
    type: "POST", 
    url: "/mail", 
    data: { mail: mail }, 
    success: function(data) { 
     console.log('message', data.message); 
    }, 
    error: function(jqXHR, textStatus, err) { 
     alert('text status '+textStatus+', err '+err) 
    } 
}); 

，如果您提交的電子郵件時，你會看到一個登錄終端，顯示電子郵件和日誌在瀏覽器的開發者控制檯，顯示消息「我的電子郵件！」

Answer 6

首先你NEDD創建一個路由郵件的

var express = require('express'); 
var path = require('path'); 

var bodyParser = require('body-parser'); 


var app = express(); 
var router=app.Router(); 
// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'pug'); 


//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); // Parse request body 


app.use(express.static(path.join(__dirname, 'public'))); 

// Route to check Email 
router.post('/CheckEmail',(req,res)=>{ 
    var email=req.body.mail; // Get email here 
}) 

app.listen(process.env.port || 3000,()=>{ 
    console.log('server is running'); 
}) 

阿賈克斯

$.ajax({ 
      type: "POST", 
      url: "/CheckEmail", // post route name here 
      data: { mail: mail }, 
      success: function(data) { 
      }, 
      error: function(jqXHR, textStatus, err) { 
       alert('text status '+textStatus+', err '+err) 
      } 
     });