Node.js獲取前端ajax提交的request信息
今天看一下Node.js怎么獲取ajax提交的request 信息
眾所周知，ajax可以在不刷新整個頁面的情況下實現(xiàn)局部刷新，這是相當(dāng)好的一種方式，能夠讓我們動態(tài)更新信息，今天我們看一下怎么用node來接收到前端ajax提交過來的信息
下面我貼一下前端的代碼
index.html的代碼我就不貼了， 因為里面就只有一個按鈕而已，要實現(xiàn)的功能是點擊按鈕提交ajax異步請求
主要貼一下js頁面的代碼
$("button").on("click",function(){
//提交ajax請求
$.ajax({
url:"http://localhost:9999",
data:{name:'xiaoming',age:19},
type:"POST",
dataType:"json",
async:true,
timeout:5000,
complete:function(){
console.log("end");
},
success:function(data,textStatus,jqXHR){
console.log(data);
console.log(textStatus);
console.log(jqXHR);
},
error:function(textStatus,jqXHR){
console.log("error");
console.log(textStatus);
console.log(jqXHR);
}
});
});
這樣我們就已經(jīng)異步提交了一個ajax請求給服務(wù)端。
由于我的服務(wù)端是用node寫的，我貼一下node.js的代碼
/**
* New node file
*/
//載入模塊
var http = require("http");
function onRequest(req,resp){
//獲取ajax提交的信息
req.on("data",function(data){
//打印
console.log(decodeURIComponent(data));
});
//返回response
resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
//返回響應(yīng)尾
resp.end();
}
//創(chuàng)建服務(wù)器
http.createServer(onRequest).listen(9999);
服務(wù)器獲取的結(jié)果如下:
name=xiaoming&age=19
乍一看，其實獲取ajax的請求信息是非常簡單，我在node里創(chuàng)建了服務(wù)器，然后給request添加data事件，做了一個回調(diào)處理，然后就可以獲取到ajax提交過來的數(shù)據(jù)了
但是這樣的話，我們還是不能靈活的使用這個數(shù)據(jù)，我們必須用split將其name和age的value分割出來，這是相當(dāng)不方便的。
于是我們想到了用querystring來解析為json對象，我們只需要稍稍修改一下剛剛的代碼就可以實現(xiàn)
/**
* New node file
*/
//載入模塊
var http = require("http");
var qs = require("querystring");
function onRequest(req,resp){
//獲取ajax提交的信息
var currentData = "";
req.on("data",function(data){
//打印
currentData += data;
console.log(qs.parse(currentData));
});
//返回response
resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
//返回響應(yīng)尾
resp.end();
}
//創(chuàng)建服務(wù)器
http.createServer(onRequest).listen(9999);
下面是運行的結(jié)果
{ name: 'xiaoming', age: '19' }
我們也可以將它裝到一個變量里，然后使用它的各種屬性
var temp = qs.parse(data); console.log(temp.name); console.log(temp.age);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- node.js+jQuery實現(xiàn)用戶登錄注冊AJAX交互
- Node.js如何響應(yīng)Ajax的POST請求并且保存為JSON文件詳解
- Node.js配合node-http-proxy解決本地開發(fā)ajax跨域問題
- Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請求的教程
- node.js+Ajax實現(xiàn)獲取HTTP服務(wù)器返回數(shù)據(jù)
- node.js chat程序如何實現(xiàn)Ajax long-polling長鏈接刷新模式
- Ajax異步文件上傳與NodeJS express服務(wù)端處理
- Ajax 的初步實現(xiàn)(使用vscode+node.js+express框架)
相關(guān)文章
本篇文章主要介紹了基于nodejs 的多頁面爬蟲 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹了Node定時備份MySQL的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了Node常見的三種安全防范手段詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了node.js中的fs.mkdir方法使用說明,本文介紹了fs.mkdir方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
本篇文章主要介紹了Express框架之connect-flash詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
node.js程序作為服務(wù)并在windows下開機(jī)自啟動（用forever）
這篇文章主要介紹了node.js程序作為服務(wù)并在windows下開機(jī)自啟動的相關(guān)資料，因為實現(xiàn)的功能比較簡單，沒有選擇功能比較強(qiáng)大的pm2，文中選擇利用了forever，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
這篇文章主要介紹了使用nvm安裝|更新|切換|nodejs的命令詳解,有了nvm就可以簡單操作node版本的切換、安裝、查看等，需要的朋友可以參考下2022-07-07
Node中對非阻塞I/O、事件循環(huán)的知識點總結(jié)
在本篇文章里小編給大家整理的是一篇關(guān)于Node中對非阻塞I/O、事件循環(huán)的知識點分享內(nèi)容，需要的朋友們可以參考下。2020-01-01
這篇文章主要為大家介紹了nodeJs事件循環(huán)運行代碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Win7系統(tǒng)只能安裝的nodejs13.14，如何安裝高版本nodejs
正常情況下,Win7支持的Node.js最高版本是V13.14,但在開發(fā)過程中,有不少Vue項目或其他需要依賴Node環(huán)境的項目,對Node版本要求都比較高,對此,我們要么重裝操作系統(tǒng)到Win8以上,要么就得想辦法在Win7中安裝高版本的Node,否則很多項目在編譯打包時可能會出現(xiàn)警告信息或失敗2024-11-11