生活随笔
收集整理的這篇文章主要介紹了
nodejs接收get请求参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
nodejs接收get請求參數
- 1.1-瀏覽器向服務器發送get請求參數的兩種方式
1.2-服務端使用url模塊解析get請求參數
在http協議中，一個完整的url路徑如下圖
- 通過下圖我們可以得知，get請求的參數是直接在url路徑中顯示。
- get的請求參數在path資源路徑的后面添加，以?表示參數的開始，以key=value表示參數的鍵值對，多個參數以&符號分割
- hash部分表示的是資源定位符（滾動網頁可視區域），由瀏覽器自動解析處理，它的作用是滾動·騷到網頁指定的位置
1.1-瀏覽器向服務器發送get請求參數的兩種方式
- *瀏覽器向服務端發送get請求主要有兩種方式，一種是使用href跳轉，url拼接參數
- 一種是ajax請求發送參數 這兩種在服務端都是一樣處理，沒有任何區別
<button type="submit" class="btn btn-success" onclick="window.location.href='/get?name=張三&age=18'">點擊發送一個帶參數的get請求
</button>
<a href="/get?name=張三&age=18">不管是a標簽還是按鈕，只要是href路徑都可以
</a>
<script>$('#form').on('submit', function (e) {e.preventDefault();$.ajax({url: 'heroAdd',type: 'get',dataType: 'json',data: $(this).serialize(),success: function (data) {}});});
</script>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Hero - Admin
</title><script src="/node_modules/jquery/dist/jquery.js"></script><link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css"><script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script><style>.hero-list img {width: 50px;}</style>
</head><body><header><div class="page-header container"><h1><a href="/">王者榮耀
</a><small>英雄管理器
</small></h1></div></header><div class="container hero-list"><form id="form"><div class="form-group"><label for="exampleInputEmail1">英雄名稱
</label><input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="請輸入英雄名稱"></div><div class="form-group"><label for="exampleInputPassword1">英雄性別
</label><div class="radio"><label><input type="radio" name="gender" id="optionsRadios1" value="男" checked>男
</label><label><input type="radio" name="gender" id="optionsRadios1" value="女" checked>女
</label></div></div><div class="form-group"><label for="exampleInputFile">英雄圖片
</label><p class="help-block">請上傳英雄圖片.
</p></div><button type="submit" class="btn btn-success">點擊保存
</button></form><button type="submit" class="btn btn-success" onclick="window.location.href='/get?name=張三&age=18'">點擊發送一個帶參數的get請求
</button><a href="/get?name=張三&age=18">不管是a標簽還是按鈕，只要是href路徑都可以
</a></div>
</body><script>$('#form').on('submit', function (e) {e.preventDefault();$.ajax({url: 'heroAdd',type: 'get',dataType: 'json',data: $(this).serialize(),success: function (data) {}});});
</script></html>
1.2-服務端使用url模塊解析get請求參數
var url =
require(
'url');
console.log(
encodeURI(req.url));
var parseObj = url.parse(req.url,
true);
console.log(parseObj);
var pathname = parseObj.pathname;
console.log(pathname);
req.query = parseObj.query;
console.log(req.query);
- 打印結果如下，下方這張圖可以很好的解釋每一個字段的含義
- 這里很多null的原因是我們客戶端請求沒有寫完整的路徑，直接是斜杠加路徑，省略了我們的ip和端口號
Url {protocol:
null,slashes:
null,auth:
null,host:
null,port:
null,hostname:
null,hash:
null,search:
'?name=%E5%BC%A0%E4%B8%89&age=18',query: { name:
'張三', age:
'18' },pathname:
'/get',path:
'/get?name=%E5%BC%A0%E4%B8%89&age=18',href:
'/get?name=%E5%BC%A0%E4%B8%89&age=18' }
var http =
require(
'http');
var fs =
require(
'fs');
var path =
require(
'path');
var url =
require(
'url');
var app = http.createServer();
app.on(
'request',
function (req, res) {console.log(
encodeURI(req.url));
var parseObj = url.parse(req.url,
true);console.log(parseObj);
var pathname = parseObj.pathname; console.log(pathname);req.query = parseObj.query;console.log(req.query);
if (pathname ===
'/heroAdd') {fs.readFile(
'./heroAdd.html',
function (err, data) {if (err) {
throw err;}res.end(data);});}
else if (pathname.indexOf(
'/node_modules') ===
0) {fs.readFile(__dirname + pathname,
function (err, data) {if (err) {
throw err;}
else {console.log(data);res.end(data);}});}
else {res.end(
'請求路徑： ' + req.url);}
});
app.listen(
3000,
function () {console.log(
'歡迎來到王者榮耀英雄管理器');
});
總結
以上是生活随笔為你收集整理的nodejs接收get请求参数的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
