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將JSON字符串轉(zhuǎn)化為JSON對象報錯的解決
這篇文章主要介紹了nodejs將JSON字符串轉(zhuǎn)化為JSON對象報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-07-07Node.js文件系統(tǒng)fs擴展fs-extra說明
這篇文章主要介紹了Node.js文件系統(tǒng)fs擴展fs-extra說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Node.js 8 中的 util.promisify的詳解
本篇文章主要介紹了Node.js 8 中的 util.promisify的詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06node跨域轉(zhuǎn)發(fā) express+http-proxy-middleware的使用
這篇文章主要介紹了node跨域轉(zhuǎn)發(fā) express+http-proxy-middleware的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Node.js實現(xiàn)Excel轉(zhuǎn)JSON
本文給大家記錄的是個人項目中遇到的,使用node.js實現(xiàn)Excel轉(zhuǎn)換成Json的方法和過程,十分的簡單實用,也很詳細,這里推薦給有需要的小伙伴參考下。2015-04-04Node.js?中常用內(nèi)置模塊(path?路徑模塊)
這篇文章主要介紹了Node.js?中常用內(nèi)置模塊(path?路徑模塊),文章圍繞主題展開詳細的相關(guān)介紹,具有一定的參考價值,感興趣的朋友可以參考一下2022-09-09npm報錯"A?complete?log?of?this?run?can?be?found?
這篇文章主要給大家介紹了關(guān)于npm報錯"A?complete?log?of?this?run?can?be?found?in:"的解決辦法,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-04-04