nodejs之get/post請求的幾種方式小結(jié)
最近一段時間在學(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)建一個放置靜態(tài)資源的文件夾(wwwroot),然后代碼如下:
var express = require('express'); // 引入模塊 var web = express(); // 使用模塊創(chuàng)建一個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端口 啟動服務(wù)器 { console.log('服務(wù)器啟動中'); })
(2)post方法
前端:用post方法需要將form里面的 method = GET 改成 mthod = POST,表示使用post方法;
服務(wù)器:除get方法的要求外,還需要引入 body-parser模塊,以及對url進行編碼;
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ù)器啟動中'); })
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(); 里面有三個參數(shù) ,參數(shù)1:設(shè)置xhr請求服務(wù)器的時候,請求的方式;參數(shù)2:設(shè)置請求的路徑和參數(shù);(?是路徑和參數(shù)的分割線);參數(shù)3:設(shè)置同步請求還是異步請求,不寫的話默認為異步請求; } </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ā)來的評價'); }) app.listen('3000',function() { console.log('服務(wù)器啟動中'); })
(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=商品還好,快遞也及時,但是就想給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ā)送來的評價'); }) app.listen('3000',function() { console.log('服務(wù)器啟動中'); })
(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表單所需要用到的一個模塊 var formData = multer(); var app = express(); app.use(express.static('wwwroot')); app.use(bodyParser.urlencoded({extended:false})); // 如果使用formdata提交的數(shù)據(jù),必須在參數(shù)中使用array(),array()會先解析請求體當(dāng)中的數(shù)據(jù),再傳輸數(shù)據(jù) app.post('/comment',formData.array(),function(request,response) { response.send('已經(jīng)接收到用post方法發(fā)送來的評價'); }) app.listen('3000',function() { console.log('服務(wù)器啟動中'); })
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('服務(wù)器返回的信息是' + data); }) // $.get() 發(fā)起一個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ù)器啟動中'); })
(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ù)器啟動中'); }) 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', // 請求的方式,默認為get請求 data:{name:'小明',password:'123'}, // 發(fā)送到服務(wù)器的數(shù)據(jù) timeout:10000, // 超時 (10s) cache:true, // 緩存 默認為true async:true, // 是否異步 // 同步任務(wù)(sync) :當(dāng)上一個任務(wù)沒有完成的時候,下一個任務(wù)無法開啟,有可能會卡死主線程; //異步任務(wù)(Async):當(dāng)上一個任務(wù)沒有完成的時候,下一個任務(wù)仍然會被執(zhí)行,用戶體驗性好; success:function(data,status,xhr) { console.log('服務(wù)器返回的數(shù)據(jù)是:' + data); console.log('返回的信息是:' + xhr.getAllResponseHeaders()); } error:function(xhr,status,error) { console.debug('錯誤信息:' + error); } complete:function(xhr,status) { console.log('全部流程結(jié)束'); } }) }) </script>
服務(wù)器里面可以使用上面ajax的get和post方法的代碼,ajax請求的方式通過type設(shè)置為get方式還是post方式。
以上這篇nodejs之get/post請求的幾種方式小結(jié)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- nodejs處理http請求實例詳解之get和post
- Node.js中的HTTP?Server對象與GET、POST請求
- nodejs 使用http進行post或get請求的實例(攜帶cookie)
- nodejs使用http模塊發(fā)送get與post請求的方法示例
- nodejs實現(xiàn)HTTPS發(fā)起POST請求
- node.js+postman實現(xiàn)模擬HTTP服務(wù)器與客戶端交互
- 從零開始學(xué)習(xí)Node.js系列教程一:http get和post用法分析
- 輕松創(chuàng)建nodejs服務(wù)器(10):處理POST請求
- Node.js如何響應(yīng)Ajax的POST請求并且保存為JSON文件詳解
- NodeJS收發(fā)GET和POST請求的示例代碼
- Node發(fā)出HTTP POST請求的方法實例小結(jié)
相關(guān)文章
Node使用Sequlize連接Mysql報錯:Access denied for user ‘xxx’@‘localh
這篇文章主要給大家介紹了關(guān)于Node使用Sequlize連接Mysql報錯:Access denied for user 'xxx'@'localhost'的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01基于 Docker 開發(fā) NodeJS 應(yīng)用
這是兩篇文章的第一篇。本文涵蓋了有關(guān)在使用 Express 框架開發(fā)一個Node應(yīng)用時,用Docker 替代 Vagrant 的比較詳細的教程, 應(yīng)用將使用 connect-redis 中間件將會話信息持久化到Redis中. 第二篇文章將介紹到將這個開發(fā)的設(shè)置產(chǎn)品化.2014-07-07學(xué)習(xí)使用ExpressJS 4.0中的新Router的用法
ExpressJS 4.0中提出了新的路由Router,提供了路由應(yīng)有的API,本文詳細的介紹了ExpressJS 4.0中的新Router的用法,非常具有實用價值,需要的朋友可以參考下2018-11-11nodejs處理圖片的幾種方法總結(jié)(使用sharp、jimp及webconvert)
這篇文章主要給大家介紹了關(guān)于nodejs處理圖片的幾種方法,文中介紹的方法分別是sharp、jimp及webconvert,在開發(fā)過程中我們有時候需要對圖片進行處理,給一個圖片添加水印、多個圖片合成為一圖片等操作,需要的朋友可以參考下2023-12-12深入理解Commonjs規(guī)范及Node模塊實現(xiàn)
本篇文章主要介紹了深入理解Commonjs規(guī)范及Node模塊實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05