zoukankan      html  css  js  c++  java
  • Nodejs之http的表单提交

    之前介绍了http模块的请求与响应的过程,也介绍了TCP协议的客户端与服务端的数据传输,http协议是TCP上层协议。这里创建了一个简单的web服务器,并对提交表单数据进行处理,根据了不起的Node.js一书总结。

    POST方法提交表单数据

      之前也总结过,向服务器提交数据需要使用POST方法,GET方法的请求信息都在查询字符串中,没有请求体,而POST方法的传输的数据都在请求体中,故提交表单数据时需要使用POST方法。
      req是请求信息,req.url表示请求的地址,当服务器运行之后,req请求的网址为127.0.0.1:3000,此时req.url为‘/’,则返回的是一串表单数据,在表单数据中设置了method是post,action是‘/url’,表面提交数据的方式是POST,将数据提交的地址为127.0.0.1:3000/url,而提交之后要获取新的页面即127.0.0.1:3000/url,此时req.url为‘/url’,故显示的另一个页面。

        //提交表单数据
        var http=require('http');
        var querystring=require('querystring');
        
        var server=http.createServer(function (req,res) {
            //req.url不同则返回的页面不同
            if('/'==req.url){
                res.writeHead(200,{'Content-Type':'text/html'});
                res.write([
                    '<form method="post" action="/url">',
                    '<h1>My Form</h1>',
                    '<fieldset>',
                    '<label>Personal Information</label>',
                    '<p>What is your name?</p>',
                    '<input type="text" name="name">',
                    '<button>submit</button>',
                    '</form>'
                ].join(''));
                res.end();
            }else if('/url'==req.url&&req.method=='POST'){
                var reqBody='';
                req.on('data',function (data) {
                    reqBody += data;
                });
                req.on('end',function () {//用于数据接收完成后再获取
                    res.writeHead(200,{'Content-Type':'text/html'});
                    res.write('you have sent a '+req.method+' request
    ');
                    res.write('<p>Content-Type:'+req.headers['content-type']+'</p>'
                        +'<p>Data:your name is '+querystring.parse(reqBody).name+'</p>');
                    res.end();
                })
            }else{
                res.writeHead(404);
                res.write('Not Found');
                res.end();
            }
        }).listen(3000,function () {
            console.log('server is listening 3000');
        });
    

      提交之后,需要获取请求信息的请求体,因为POST方法中信息都在请求体中,用req绑定data事件获取数据,这里需要注意的是必须得在数据接收完成后再对数据进行操作,即必须绑定end事件监听请求信息是否传输完成。
      querystring是查询字符串模块,用于对查询字符串的解析,parse方法将查询字符串解析成一个对象。在git中运行服务器,得到页面是这样的:

    提交数据后:

  • 相关阅读:
    从输入url到浏览器加载过程(回答此问题的一个主干脉络)
    如何减少回流,重绘
    mac常用启动各种服务的命令
    分布式笔记搬迁
    JAVA基础
    EasyExcel引入
    mac 好用软件地址存储
    2018/4/11
    2018/04/04
    jdk各版本
  • 原文地址:https://www.cnblogs.com/aicanxxx/p/7108134.html
Copyright © 2011-2022 走看看