nodejs之get/post請求的幾種方式小結(jié)

更新時(shí)間：2017年07月26日 09:28:28 投稿：jingxian

下面小編就為大家?guī)硪黄猲odejs之get/post請求的幾種方式小結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近一段時(shí)間在學(xué)習(xí)前端向服務(wù)器發(fā)送數(shù)據(jù)和請求數(shù)據(jù),下面總結(jié)了一下向服務(wù)器發(fā)送請求用get和post的幾種不同請求方式：

1.用form表單的方法：

(1)get方法

前端代碼:

<form action = "/login" method = "GET">

 <label for = "username">賬號：</label>

 <input type = "text" name ="username" placeholder = "請輸入賬號" required>

 <br>

 <label for = "password">密碼：</label>

 <input type = "password" name = "password" placeholder = "請輸入密碼" required>

 <br>

 <input type = "submit" value = "登陸">

</form>

服務(wù)器代碼:

用get方法首先要配置json文件，在command中輸入命令npm-init ，然后要安裝所需要的express模塊，還需要在文件夾里面創(chuàng)建一個(gè)放置靜態(tài)資源的文件夾(wwwroot)，然后代碼如下：

var express = require('express'); // 引入模塊

var web = express(); // 使用模塊創(chuàng)建一個(gè)web應(yīng)用

web.use(express.static('wwwroot')); // 調(diào)用use方法 使用static方法

web.get('/login',function(request,response) 

{

  使用get方法 參數(shù)1 接口 參數(shù)2 回調(diào)函數(shù) (參數(shù)1 向服務(wù)器發(fā)送的請求 參數(shù)2 服務(wù)器返回的數(shù)據(jù))

  var name = request.query.username;  // 獲取前端發(fā)送過來的賬號

  var psw = request.query.password;   // 獲取前端發(fā)送過來的密碼

  response.status('200').send('輸入的內(nèi)容是' + name + '<br>' + psw);

})

web.listen('8080',function()  // 監(jiān)聽8080端口 啟動(dòng)服務(wù)器

{

  console.log('服務(wù)器啟動(dòng)中');

})

（2）post方法

前端：用post方法需要將form里面的 method = GET 改成 mthod = POST，表示使用post方法;

服務(wù)器：除get方法的要求外，還需要引入 body-parser模塊，以及對url進(jìn)行編碼；

var express = require('express');
var bodyParser = require('body-parser');
var web = express();
web.use(express.static('wwwroot'));
// url 統(tǒng)一資源調(diào)配符 encoded 編碼 
web.use(bodyParser.urlencoded({extended:false}));
web.post('/login',function(request,response)
{
  var name = request.body.username;
  var psw = request.body.password;
  if(name != '599115316@qq.com' || psw != '123456')
  {
    response.send('<span style = "color:blue">登錄失敗</span>')
  }
  else
  {
    response.send('<span style = "color:red">登陸成功</span>')
  }
})
web.listen('8080',function()

{
  console.log('服務(wù)器啟動(dòng)中');
})

2.xhr(XML HTTP Request方法有三種請求方式 get/post/formdata)

XHR是ajax的核心，使用XHR可以向服務(wù)器發(fā)送數(shù)據(jù) 也可以解析服務(wù)器返回的數(shù)據(jù);

(1)xhr之get方法：

前端：

<button click = "get()">get方法</button>

<script>

function()

{

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()

  {

    if(xhr.readyState == 4)

    {console.log(xhr.responseText)}  // 服務(wù)器接收到數(shù)據(jù)后返回的數(shù)據(jù)

  }

  xhr.open('/get','/comment?custom=小明&score=2&comment=商品質(zhì)量一般，2分是給快遞小哥的')；

  xhr.send();

// xhr.open(); 里面有三個(gè)參數(shù) ,參數(shù)1：設(shè)置xhr請求服務(wù)器的時(shí)候，請求的方式；參數(shù)2：設(shè)置請求的路徑和參數(shù)；(?是路徑和參數(shù)的分割線)；參數(shù)3：設(shè)置同步請求還是異步請求，不寫的話默認(rèn)為異步請求;

}

</script>

服務(wù)器：

首先也需要安裝所用到的模塊，然后請求模塊使用；

var express = require('expres');

var app = express();

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

app.get('/comment',function(request,response)

{

  response.send('已經(jīng)接受到用get方法發(fā)來的評價(jià)');

})

app.listen('3000',function()

{

  console.log('服務(wù)器啟動(dòng)中');

})

(2)xhr之post方法：

前端：

<button click = "post()">post方法</button>

<script>

function post()

{

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()

  {

     if(xhr.readyState == 4)

     {

       console.log('接收到服務(wù)器返回的信息' + xhr.responseText);

     }

  }

  xhr.open('post','/comment'); // post方法請求的參數(shù)不寫在open里面，寫在send里面，而且需要設(shè)置請求頭；

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

  xhr.send('custom=小明&score=3&comment=商品還好，快遞也及時(shí)，但是就想給3分')；

}

</script>

服務(wù)器：

需要引入post方法所用到的模塊(body-parser模塊)以及對url編碼；

var express = require('express');

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

var app = express();

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

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

app.post('/comment',function(request,response)

{

  response.send('已經(jīng)接收到用post方法發(fā)送來的評價(jià)');

})

app.listen('3000',function()

{

  console.log('服務(wù)器啟動(dòng)中')；

})

(3)xhr之formdata方法：

前端：

<button click = "formdata()">formdata方法</button>

<script>

function formdata()

{

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()

  {

    if(xhr.readyState == 4)

    {

       console.log('formdata方法返回的數(shù)據(jù)是：' + xhr.responseText);

    }

  }

  xhr.open('post','/comment');

  var form = new FormData();

  form.append('custom','小明');

  form.append('score','5');

  form.append('comment','看你那么辛苦，給你5分好了');

  xhr.send(form);

}

</script>

服務(wù)器：

var express = require('express');

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

var multer = require('multer');  // 使用form表單所需要用到的一個(gè)模塊

var formData = multer();

var app = express();

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

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

// 如果使用formdata提交的數(shù)據(jù)，必須在參數(shù)中使用array()，array()會(huì)先解析請求體當(dāng)中的數(shù)據(jù)，再傳輸數(shù)據(jù)

app.post('/comment',formData.array(),function(request,response) 

{

  response.send('已經(jīng)接收到用post方法發(fā)送來的評價(jià)');

})

app.listen('3000',function()

{

  console.log('服務(wù)器啟動(dòng)中')；

})

3.ajax請求：

一般情況下都不需要使用ajax請求使用ajax請求可以獲取錯(cuò)誤信息以及其它的一些指令，使用ajax需要引用jquery

(1)ajax之get：

前端：

<button id = "get">ajax-get</button>

<script>

$('#get').click(function()

{

  $.get('/login',{name:'小明',password:'123456'},function(data,status,xhr)

  {

     console.log('服務(wù)器返回的信息是' + data);

  })

// $.get() 發(fā)起一個(gè)get請求，參數(shù)1：請求的接口；參數(shù)2：傳遞給服務(wù)器的數(shù)據(jù)對象；參數(shù)3：回調(diào)函數(shù)(參數(shù)1：服務(wù)器返回的數(shù)據(jù)；參數(shù)2：狀態(tài)；參數(shù)3：xhr對象”)；

})

</script>

服務(wù)器：

var express = require('express');

var app = express();

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

app.get('/login',function()

{

  if(request.query.name == '小明' && request.query.password == '123456')

  {

     response.send('登錄成功');

  }

  else

  {

     response.send('登錄失敗');

  }

})

app.listen('8080',function()

{

  console.log('服務(wù)器啟動(dòng)中');

})

(2)ajax之post：

前端：

<button id = 'post'>ajax-post</button>

<script>

  $('#post').click(function()

{

  $.post('/login',{name:'小明',password:'666'},function(data,status,xhr)

  {

     console.log('服務(wù)器返回的數(shù)據(jù)：' + data)

  })

})

</script>

服務(wù)器：

var express = require('express');
 
var bodyParser = require('body-parser');
 
 
var app = express();
 
app.use(express.static('wwwroot'));
 
app.use(bodyParser.urlencoded({extended:false}));
app.listen('8080',function()
{
  console.log('服務(wù)器啟動(dòng)中')；
})
app.post('/login',function(request,response)
{
  if(request.body.name == '小明' && request.body.password == 666)
  {
    response.send('登錄成功');
  }
  else
  {
     response.send('登錄失敗');
  }
})

(2)ajax之a(chǎn)jax：

前端：

<button id ="ajax">ajax請求</button>
<script>
  $('#id').click(function()
{
// $.ajax() 發(fā)起ajax請求;
  $.ajax({
   url :'/login',        // 請求的接口地址
   type:'post',         // 請求的方式，默認(rèn)為get請求
   data:{name:'小明',password:'123'},  // 發(fā)送到服務(wù)器的數(shù)據(jù)
   timeout:10000,       // 超時(shí) (10s)
   cache:true,           // 緩存 默認(rèn)為true
   async:true,           // 是否異步 
// 同步任務(wù)(sync) :當(dāng)上一個(gè)任務(wù)沒有完成的時(shí)候，下一個(gè)任務(wù)無法開啟，有可能會(huì)卡死主線程；
//異步任務(wù)(Async):當(dāng)上一個(gè)任務(wù)沒有完成的時(shí)候，下一個(gè)任務(wù)仍然會(huì)被執(zhí)行，用戶體驗(yàn)性好；
   success:function(data,status,xhr)
  {
     console.log('服務(wù)器返回的數(shù)據(jù)是:' + data);
     console.log('返回的信息是:' + xhr.getAllResponseHeaders());
  }
  error:function(xhr,status,error)
  {
    console.debug('錯(cuò)誤信息：' + error);
  }
  complete:function(xhr,status)
  {
     console.log('全部流程結(jié)束');
  }
})          
})
</script>

服務(wù)器里面可以使用上面ajax的get和post方法的代碼，ajax請求的方式通過type設(shè)置為get方式還是post方式。

以上這篇nodejs之get/post請求的幾種方式小結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: