nodejs中怎么實(shí)現(xiàn)get/post請(qǐng)求-創(chuàng)新互聯(lián)
這篇文章給大家介紹nodejs中怎么實(shí)現(xiàn)get/post請(qǐng)求，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
1.用form表單的方法：
(1)get方法
前端代碼:
<form action = "/login" method = "GET"> <label for = "username">賬號(hào)：</label> <input type = "text" name ="username" placeholder = "請(qǐng)輸入賬號(hào)" required> <br> <label for = "password">密碼：</label> <input type = "password" name = "password" placeholder = "請(qǐng)輸入密碼" 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ā)送的請(qǐng)求 參數(shù)2 服務(wù)器返回的數(shù)據(jù))
var name = request.query.username; // 獲取前端發(fā)送過來的賬號(hào)
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模塊，以及對(duì)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方法 有三種請(qǐng)求方式 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請(qǐng)求服務(wù)器的時(shí)候，請(qǐng)求的方式；參數(shù)2：設(shè)置請(qǐng)求的路徑和參數(shù)；(?是路徑和參數(shù)的分割線)；參數(shù)3：設(shè)置同步請(qǐng)求還是異步請(qǐng)求，不寫的話默認(rèn)為異步請(qǐng)求;
}
</script>服務(wù)器：
首先也需要安裝所用到的模塊，然后請(qǐng)求模塊使用；
var express = require('expres');
var app = express();
app.use(express.static('wwwroot'));
app.get('/comment',function(request,response)
{
response.send('已經(jīng)接受到用get方法發(fā)來的評(píng)價(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方法請(qǐng)求的參數(shù)不寫在open里面，寫在send里面，而且需要設(shè)置請(qǐng)求頭；
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('custom=小明&score=3&comment=商品還好，快遞也及時(shí)，但是就想給3分')；
}
</script>服務(wù)器：
需要引入post方法所用到的模塊(body-parser模塊)以及對(duì)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ā)送來的評(píng)價(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ì)先解析請(qǐng)求體當(dāng)中的數(shù)據(jù)，再傳輸數(shù)據(jù)
app.post('/comment',formData.array(),function(request,response)
{
response.send('已經(jīng)接收到用post方法發(fā)送來的評(píng)價(jià)');
})
app.listen('3000',function()
{
console.log('服務(wù)器啟動(dòng)中')；
})3.ajax請(qǐng)求：
一般情況下都不需要使用ajax請(qǐng)求 使用ajax請(qǐng)求可以獲取錯(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請(qǐng)求，參數(shù)1：請(qǐng)求的接口；參數(shù)2：傳遞給服務(wù)器的數(shù)據(jù)對(duì)象；參數(shù)3：回調(diào)函數(shù)(參數(shù)1：服務(wù)器返回的數(shù)據(jù)；參數(shù)2：狀態(tài)；參數(shù)3：xhr對(duì)象”)；
})
</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請(qǐng)求</button>
<script>
$('#id').click(function()
{
// $.ajax() 發(fā)起ajax請(qǐng)求;
$.ajax({
url :'/login', // 請(qǐng)求的接口地址
type:'post', // 請(qǐng)求的方式，默認(rèn)為get請(qǐng)求
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請(qǐng)求的方式通過type設(shè)置為get方式還是post方式。
關(guān)于nodejs中怎么實(shí)現(xiàn)get/post請(qǐng)求就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前標(biāo)題：nodejs中怎么實(shí)現(xiàn)get/post請(qǐng)求-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article28/dshjcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、微信公眾號(hào)、搜索引擎優(yōu)化、小程序開發(fā)、企業(yè)網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 批量創(chuàng)建文件及批量修改文件名實(shí)戰(zhàn)-創(chuàng)新互聯(lián)
- innodb如何實(shí)現(xiàn)事務(wù)隔離級(jí)別-創(chuàng)新互聯(lián)
- 常見的web服務(wù)器有哪些？小白需要知道哪些？
- Android中如何實(shí)現(xiàn)短信編輯器功能-創(chuàng)新互聯(lián)
- 域名被墻了怎么解決-創(chuàng)新互聯(lián)
- BCC工具怎么用？有什么特點(diǎn)？-創(chuàng)新互聯(lián)
- 怎么理解Java常見知識(shí)點(diǎn)中的垃圾回收機(jī)制-創(chuàng)新互聯(lián)
- 談?dòng)脩趔w驗(yàn) 其實(shí)生活是最好的老師 2016-11-12
- 這6種使用插畫的方法可以提升網(wǎng)站用戶體驗(yàn) 2022-05-29
- 網(wǎng)站設(shè)計(jì)如何做到增加用戶體驗(yàn)度？ 2022-01-22
- 為什么你家的網(wǎng)站用戶體驗(yàn)度不如競爭對(duì)手的網(wǎng) 2023-01-11
- 用戶體驗(yàn)至上 企業(yè)網(wǎng)站建設(shè)一定要想辦法加強(qiáng)和用戶間的互動(dòng) 2022-05-18
- 企業(yè)網(wǎng)站建設(shè)如何提升用戶體驗(yàn)? 2013-05-22
- 成功的用戶體驗(yàn)設(shè)計(jì)的4要素 2014-04-30
- 在網(wǎng)站建設(shè)過程中用戶體驗(yàn)涉及內(nèi)容質(zhì)量與加載速度等諸多方面 2022-05-24
- 11個(gè)改善網(wǎng)站用戶體驗(yàn)設(shè)計(jì)的技巧 2016-09-09
- 影響網(wǎng)站用戶體驗(yàn)的5大因素 2021-10-25
- 網(wǎng)站改版最重要的兩條是根據(jù)數(shù)據(jù)和用戶體驗(yàn) 2021-10-03
- 網(wǎng)站建設(shè)公司從網(wǎng)站功能淺談?dòng)脩趔w驗(yàn) 2021-10-18