• 前端代码
<!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. POJ3259 Wormholes 【spfa判负环】

    题目链接:http://poj.org/problem?id=3259 Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submis ...

  2. jupyter notebook 常用快捷操作

    Shift-Enter 执行当前cell,并自动跳到下一个cell Ctrl-Enter 执行当前cell,执行后不自动调转到下一个cell DD 删除当前的cell L 为当前的cell加入line ...

  3. orcale备份语句

    1.创建一个文件夹,比如d盘下创建一个expdp的文件夹 d:\expdp2.使用一个用户,必须具有DBA权限 比如 sqlplus /nolog conn system/password@数据库连接 ...

  4. 更改oracle RAC public ip,vip,scan ip和private ip

    更改oracle RAC public ip,vip,scan ip和private ip oifcfg - Oracle 接口配置工具 用法:  oifcfg iflist [-p [-n]]    ...

  5. LeetCode 第 167 场周赛

    1290.二进制链表转整数 1291.顺次数 1292.元素和小于等于阈值的正方形的最大边长 1293.网格中的最短路径 1290.二进制链表转整数 1290.二进制链表转整数 给你一个单链表的引用结 ...

  6. 1.3Security:权限管理，过滤、监听、拦截

    Security:权限管理 常用权限拦截器 SecurityContextPersistenceFilter 以前是HttpSesstionContextIntegrationFilter,位于过滤器 ...

  7. 剑指offer37：统计一个数字在排序数组中出现的次数

    1 题目描述 统计一个数字在排序数组中出现的次数. 2 思路和方法 (1)查找有序数组,首先考虑使用二分查找,使时间复杂度为O(log n).更改二分查找的条件,不断缩小区间,直到区间头和区间尾均为k ...

  8. session和cookie区别，多台WEB服务器如何共享session，禁用COOKIE后SESSION是否可用，为什么？

    答:session的运行机制: 用户A访问站点Y,如果站点Y指定了session_start();(以下假设session_start()总是存在)那么会产生一个session_id,这个sessio ...

  9. python — 表的操作（一）

    1. 创建表 创建表: create table t1 (id int,name char(4)); create table t2 (id int,name char(4)) engine=myis ...

  10. 二、python数据类型、字符编码、文件处理

    一. 前言 1. 什么是数据: x = 10,10就是我们要存储的数据 2. 为何数据要分不同的类型 数据是用来表示状态的, 不同的状态就应该用不同类型的数据去表示 3. 数据类型 数字(整型.长整型 ...