中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

nodejs中怎么實現get/post請求

發布時間:2021-07-21 10:40:22 來源:億速云 閱讀:162 作者:Leah 欄目:web開發

這篇文章給大家介紹nodejs中怎么實現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>

服務器代碼:

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

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

var web = express(); // 使用模塊創建一個web應用

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

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

{

  使用get方法 參數1 接口 參數2 回調函數 (參數1 向服務器發送的請求 參數2 服務器返回的數據)

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

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

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

})

web.listen('8080',function()  // 監聽8080端口 啟動服務器

{

  console.log('服務器啟動中');

})

(2)post方法

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

服務器:除get方法的要求外,還需要引入 body-parser模塊,以及對url進行編碼;

var express = require('express');
var bodyParser = require('body-parser');
var web = express();
web.use(express.static('wwwroot'));
// url 統一資源調配符 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('服務器啟動中');
})

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

XHR是ajax的核心,使用XHR可以向服務器發送數據 也可以解析服務器返回的數據;

(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)}  // 服務器接收到數據后返回的數據

  }

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

  xhr.send();

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

}

</script>

服務器:

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

var express = require('expres');

var app = express();

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

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

{

  response.send('已經接受到用get方法發來的評價');

})

app.listen('3000',function()

{

  console.log('服務器啟動中');

})

(2)xhr之post方法:

前端:

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

<script>

function post()

{

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function()

  {

     if(xhr.readyState == 4)

     {

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

     }

  }

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

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

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

}

</script>

服務器:

需要引入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('已經接收到用post方法發送來的評價');

})

app.listen('3000',function()

{

  console.log('服務器啟動中');

})

(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方法返回的數據是:' + 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>

服務器:

var express = require('express');

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

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

var formData = multer();

var app = express();

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

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

// 如果使用formdata提交的數據,必須在參數中使用array(),array()會先解析請求體當中的數據,再傳輸數據

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

{

  response.send('已經接收到用post方法發送來的評價');

})

app.listen('3000',function()

{

  console.log('服務器啟動中');

})

3.ajax請求:

一般情況下都不需要使用ajax請求 使用ajax請求可以獲取錯誤信息以及其它的一些指令,使用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('服務器返回的信息是' + data);

  })

// $.get() 發起一個get請求,參數1:請求的接口;參數2:傳遞給服務器的數據對象;參數3:回調函數(參數1:服務器返回的數據;參數2:狀態;參數3:xhr對象”);

})

</script>

服務器:

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('服務器啟動中');

})

(2)ajax之post:

前端:

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

<script>

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

{

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

  {

     console.log('服務器返回的數據:' + data)

  })

})

</script>

服務器:

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('服務器啟動中');
})
app.post('/login',function(request,response)
{
  if(request.body.name == '小明' && request.body.password == 666)
  {
    response.send('登錄成功');
  }
  else
  {
     response.send('登錄失敗');
  }
})

(2)ajax之ajax:

前端:

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

服務器里面可以使用上面ajax的get和post方法的代碼,ajax請求的方式通過type設置為get方式還是post方式。

關于nodejs中怎么實現get/post請求就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

沧州市| 林州市| 松滋市| 图们市| 昭平县| 上饶县| 塔城市| 洛扎县| 九台市| 开远市| 崇义县| 桂林市| 西盟| 利川市| 山西省| 济宁市| 龙井市| 浦北县| 松桃| 维西| 晋州市| 石台县| 五莲县| 奉新县| 霍山县| 姜堰市| 磴口县| 通道| 宜宾市| 武隆县| 高要市| 佳木斯市| 石楼县| 曲松县| 宿松县| 铁岭市| 肃宁县| 仁寿县| 阳城县| 罗田县| 陕西省|