Node.js獲取前端ajax提交的request信息

發(fā)布時間：2020-09-10 17:39:01 來源：腳本之家閱讀：178 作者：HaoDaWang 欄目：web開發(fā)

今天看一下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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

Node.js獲取前端ajax提交的request信息

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽