• 前端代码
<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <link rel="icon" href="../../../../favicon.ico">

    <title>Sticky Footer Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->

    <link href="../static/booststrap4/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="../static/mycss/sticky-footer-navbar.css" rel="stylesheet">

</head>

<body>

<header>

    <!-- Fixed navbar -->

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

        <a class="navbar-brand" href="#">Fixed navbar</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">

            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">

                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Link</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link disabled" href="#">Disabled</a>

                </li>

            </ul>

            <form class="form-inline mt-2 mt-md-0">

                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

            </form>

        </div>

    </nav>

</header>

<!-- Begin page content -->

<main role="main" class="container">

    <h1 class="mt-5">Sticky footer with fixed navbar</h1>

    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>

    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>

    <form action="http://127.0.0.1:8090/?name=cpc&age=22" method="post">
#这里action属性如此构造纯粹是上机实验的需要，为的是能使用fs或者http模块解析查询参数

        <p>

        <textarea name="rec" cols="" rows="">

        </textarea>

        </p>

        <p>

            <button type="submit" class="btn btn-outline-primary">提交</button>

        </p>

    </form>

</main>

<footer class="footer">

    <div class="container">

        <span class="text-muted">Place sticky footer content here.</span>

    </div>

</footer>

<!-- Bootstrap core JavaScript

================================================== -->

<!-- Placed at the end of the document so the pages load faster -->

<script src="../static/booststrap4/js/jquery-3.3.1.min.js"></script>

</body>

</html>

效果:

点击提交以后，后端js脚本能够解析get和post请求参数和数据

  • node.js后端代const http = require('http');var myquerystring = require('querystring');var myurl = require('url');var myfs = require('fs');var str="";
http.createServer(function(req,res){

    var myreq = myurl.parse(req.url,true);

    console.log(myreq.query.name); #解析url中的参数name

    console.log(myreq.query.age); #解析url中的参数age    req.on('data',function (data) {

        str+=data;#由于提交过来的数据量是多次到达的，所以用了+=操作符

    });

    req.on('end',function () {
        #定义了提交完成后的动作

        const postdata = myquerystring.parse(str);#这里特地用querystring模块解析了提交的参数，也就是html里面name属性为rec的容器值

        console.log(postdata);

        myfs.writeFile('the pulp fiction.txt',postdata.rec,function(err){
　　　　　　　　#调用fs模块完成写入

            if (err) throw err;

            console.log('file saved');

        })

    });

    res.end();

}).listen();

输出结果:

cpc

[Object: null prototype] {

rec:

' rec= Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 \r\nNode.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 ' }

file saved

undefined

undefined

[Object: null prototype] {

rec:

' rec= Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 \r\nNode.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 ' }

file saved

node.js----一个httpserver提交和解析get参数的例子的更多相关文章

  1. 前端使用node.js的http-server开启一个本地服务器

    前端使用node.js的http-server开启一个本地服务器 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时 ...

  2. body-parser Node.js(Express) HTTP请求体解析中间件

    body-parser Node.js(Express) HTTP请求体解析中间件 2016年06月08日     781     声明 在HTTP请求中,POST.PUT和PATCH三种请求方法中包 ...

  3. Node.js中http-server的使用

    Node.js中http-server的使用 使用阿里的npm镜像 国外的npm太慢了.查看一下自己使用的源: npm config get registry 应该显示https://registry ...

  4. 创建node.js一个简单的应用实例

    在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...

  5. 使用node.js的http-server开启一个本地服务器

    用html写了一个网页,想要在手机上查看适配效果,但是苦于手机上没有直接查看HTML的.想到手机和电脑都在一个局域网内,能不能搭建一个局域网内的网页服务器呢? 1.下载 http-server 显然, ...

  6. node.js之http-server

    我们有时候会遇到这种情况,一个html文件在本地打开时,测试平常的功能还行,但是,一涉及到ajax请求,就算你是请求本地的json文件,他都会涉及到跨域的问题,浏览器本身就限制了本地打开时,不允许跨域 ...

  7. Node.js小Httpserver

    须要说明两点: 1 程序文件hello.js需用记事本另存为utf-8格式的hello.js watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamVhcGVk ...

  8. Node.js中的express框架获取http参数

    最近本人在学习开发NodeJs,使用到express框架,对于网上的学习资料甚少,因此本人会经常在开发中做一些总结. express获取参数有三种方法:官网介绍如下 Checks route para ...

  9. [转]Node.JS package.json 字段全解析

    Name 必须字段. 小提示: 不要在name中包含js, node字样: 这个名字最终会是URL的一部分,命令行的参数,目录名,所以不能以点号或下划线开头: 这个名字可能在require()方法中被 ...

随机推荐

  1. Python基础总结之第七天开始【总结字符串、列表、元组的常用方法】（新手可相互督促）

    前面的笔记说,python中的一切数据类型都是对象 我们在细化下就是:对象可由两部分组成:对象数据和对象方法 针对不同类型的数据对象,有不同的操作对象的方法. 那么我们开始看下字符串对象的常用方法: ...

  2. 打印 request 请求中的参数

    @SuppressWarnings({"rawtypes"})private void showParams(HttpServletRequest request) { Map&l ...

  3. 【洛谷】P4883 mzf的考验

    [洛谷]P4883 mzf的考验 最近忽然放弃治疗开始随机跳题了 感觉还行 就是必须吸氧感觉有点糟糕... 这题翻转和求和都是平衡树基本操作,那个异或可以通过维护树中\(2\)进制下第\(2^{i}\ ...

  4. Python解Leetcode： 724. Find Pivot Index

    leetcode 724. Find Pivot Index 题目描述:在数组中找到一个值,使得该值两边所有值的和相等.如果值存在,返回该值的索引,否则返回-1 思路:遍历两遍数组,第一遍求出数组的和 ...

  5. 测试工作小工具~总结&下载连接

    1.Gif录制小工具(动图提单 ≖ᴗ≖) 地址:https://licecap.en.softonic.com/download

  6. visual studio 用 vs code 的 hot key

    记得 2 年多前开始用 vs code, 一开始非常不适应它的 hot key 一心想把 vs code 的 hot key 全改成 visual studio 的,但一直没有找到比较方便的办法 (总 ...

  7. javascript数字格式化通用类——accounting.js使用

    简介 accounting.js 是一个非常小的JavaScript方法库用于对数字,金额和货币进行格式化.并提供可选的Excel风格列渲染.它没有依赖任何JS框架.货币符号等可以按需求进行定制. 代 ...

  8. java Map 四种遍历方法

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...

  9. Javascript中的事件二

    <!------------------示例代码一---------------------><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  10. [转载]Pytorch详解NLLLoss和CrossEntropyLoss

    [转载]Pytorch详解NLLLoss和CrossEntropyLoss 来源:https://blog.csdn.net/qq_22210253/article/details/85229988 ...