首页 > Web开发 > 详细

nodejs中http服务器,如何使用GET,POST请求发送数据

时间:2019-07-28 15:34:37      阅读:413      评论:0      收藏:0      [点我收藏+]

浏览器给服务器传递参数,最常用的是地址栏传参(get),以及表单提交(post)

先说get传参,就是在url后跟上?key=value&key2=value2......

但是按照前几篇的http服务器中,当我们访问localhost:3000/text?a=1时,服务器却返回了404页面

在终端打印出的request.url中是这样的:/text?a=1

这样当然匹配不到路由方法了,当然要返回404页面

首先我们要只取到?号以前的路径,再去想办法取到?号之后的参数,这样就不会返回404页面了

nodejs中有一个专门处理url的核心库,可以取地址栏上的各种值,下面来更改一下之前的http服务器代码,来取到url路径以及参数:

把整个服务器代码都考过来:

api.js:(未变动)

var server = require("./server");
var router = require("./router");
var handler = require("./handler");

var handle = {};

handle["/"]=handler.home;
handle["/home"]=handler.home;
handle["/review"]=handler.review;
handle["/api_records"]=handler.api_records;
handle["/text"]=handler.text;

server.startServer(router.route,handle);

server.js:(有变动  变动的用红色字体标出)

var http = require("http");
var url = require("url");

var startServer = function(route,handle){
    var onRequest = function(request,response){
        var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
        console.log("request received"+pathname);
        var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
        route(handle,pathname,response,params);
        
    }

    var server = http.createServer(onRequest);
    //最后让服务器监听一个端口
    server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地

    console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
}

module.exports.startServer=startServer;

router.js(有变动)

var fs = require("fs");

function route(handle,pathname,response,params){
    console.log("Routing request for"+pathname);
    if(typeof handle[pathname] === ‘function‘){
        handle[pathname](response,params);
    }else{
        response.writeHead(200,{"Content-Type":"text/html"});
        fs.createReadStream(__dirname+"/404.html","utf8").pipe(response);
    }
}

module.exports.route=route;

handler.js(有变动)

var fs = require("fs");

function home(response,params){
    response.writeHead(200,{"Content-Type":"text/html"});
    fs.createReadStream(__dirname+"/index.html","utf8").pipe(response);
}

function review(response,params){
    response.writeHead(200,{"Content-Type":"text/html"});
    fs.createReadStream(__dirname+"/review.html","utf8").pipe(response);
}

function api_records(response,params){
    response.writeHead(200,{"Content-Type":"application/json"});
    response.end(JSON.stringify(params));
}

function text(response,params){
    response.writeHead(200,{"Content-Type":"text/plain;charset=UTF-8"});
    response.end("文本内容");
}

module.exports={
    home,
    review,
    api_records,
    text
}

上面代码就是关于应对get请求的全部更改,我们在handler.js中的api_records方法中,把取回来的params返回到了页面上,输入:localhost:3000/api_records?a=1&b=2

页面会展示出{a:1,b:2}

这样,我们在服务端获取到参数值后,可以根据参数值来返回给页面对应的内容!!!

 

下面说一下,怎么接受post传来的数据,我们以表单提交为例

在index.html中写上一个表单:

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html</title>
    <style>
        div{
            color:red;
            font-size:50px;
        }
    </style>
</head>
<body>
   <div>我是从服务器传回来的html页面</div> 
   <form action="/api_records" method="POST">
        name:<input type="text" name="name">
        age:<input type="text" name="age"> 
        job:<input type="text" name="job">
        <input type="submit" value="提交">
   </form>
</body>
</html>

主要更改server.js中的代码就行;

var http = require("http");
var url = require("url");
var querystring = require("querystring");//解析post传过去的数据,以防乱码

var startServer = function(route,handle){
    var onRequest = function(request,response){
        var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
        console.log("request received"+pathname);
        var data = "";
        request.on("error",function(err){//请求发生错误时触发
            console.error(err);
        }).on("data",function(chunk){//请求接收到数据时触发
            data+=chunk;
        }).on("end",function(){//请求结束后触发
            if(request.method === "POST"){
                route(handle,pathname,response,querystring.parse(data));
            }else if(request.method === "GET"){
                var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
                route(handle,pathname,response,params);
            }
        })
        
        
    }

    var server = http.createServer(onRequest);
    //最后让服务器监听一个端口
    server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地

    console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
}

module.exports.startServer=startServer;

这样在 请求接收到之后,可以冲request.method中判断是get还是post请求,若是get,就把params响应回去,若是post就把data响应回去!!!

 

 

接收post传来的数据还有一种写法,把data定义成数组,然后在request接收数据时,将chunk挨个push进去,然后用Buffer.concat()方法将data片段合并,取字符串:

var http = require("http");
var url = require("url");
var querystring = require("querystring");//解析post传过去的数据,以防乱码

var startServer = function(route,handle){
    var onRequest = function(request,response){
        var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
        console.log("request received"+pathname);
        var data = [];
        request.on("error",function(err){//请求发生错误时触发
            console.error(err);
        }).on("data",function(chunk){//请求接收到数据时触发
            data.push(chunk);
        }).on("end",function(){//请求结束后触发
            if(request.method === "POST"){
                data = Buffer.concat(data).toString();
                route(handle,pathname,response,querystring.parse(data));
            }else if(request.method === "GET"){
                var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
                route(handle,pathname,response,params);
            }
        })
        
        
    }

    var server = http.createServer(onRequest);
    //最后让服务器监听一个端口
    server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地

    console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
}

module.exports.startServer=startServer;

 

 

如果浏览器端发送给服务端的数据量很大的话,可以把这个请求取消掉:

server.js:

var http = require("http");
var url = require("url");
var querystring = require("querystring");//解析post传过去的数据,以防乱码

var startServer = function(route,handle){
    var onRequest = function(request,response){
        var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
        console.log("request received"+pathname);
        var data = [];
        request.on("error",function(err){//请求发生错误时触发
            console.error(err);
        }).on("data",function(chunk){//请求接收到数据时触发
            data.push(chunk);
        }).on("end",function(){//请求结束后触发
            if(request.method === "POST"){
                if(data.length>1e6){//若post发送给服务端数据量很大时,将请求取消
                    console.log(data.length);
                    request.connection.destroy();
                }
                data = Buffer.concat(data).toString();
                route(handle,pathname,response,querystring.parse(data));
            }else if(request.method === "GET"){
                var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
                route(handle,pathname,response,params);
            }
        })
        
        
    }

    var server = http.createServer(onRequest);
    //最后让服务器监听一个端口
    server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地

    console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
}

module.exports.startServer=startServer;

 

nodejs中http服务器,如何使用GET,POST请求发送数据

原文:https://www.cnblogs.com/fqh123/p/11258681.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!