最近在学些node，按照《nodejs实战》上的代码做练习，发现有表单重复提交的问题

第一次打开页面,显示如图是get请求

　　

　　　　　　　图1

现在我们提交aaa，显示如图，post请求

　　

　　　　　　图2

刷新页面，应该显示图1的，结果确实下面这张图，post请求。即使是按ctrl+f5刷新没用,浏览器还是重复提交了上次的内容，显示如图

　　

　　　　　　图3

不断的刷就这样了，求教这个是为什么？

　　

　　　　　　图4

node代码如下

var http=require("http");

var qs = require("querystring");

var items=[];

var server=http.createServer(function(req,res){

    console.log("req.url",req.url);

    console.log("req.method",req.method);

    if("/"==req.url){

        switch(req.method){

            case "GET":

                show(res);

                break;

            case "POST":

                add(req,res);

                break;

            default:

                badRequest(res);

        }

    }else{

        notFound(res);

    }

})

server.listen(3000);

function show(res){

    var html='<html><head><title>Todo List</title></head><body>'

        +'<h1>Todo List</h1>'

        +'<ul>'

        +items.map(function(item){

            return '<li>'+item+'</li>'

        }).join('')

        +'</ul>'

        +'<form method="post" action="/">'

        +'<p><input type="text" name="item"/></p>'

        +'<p><input type="submit" value="Add Item"/></p>'

        +'</form></body></html>';

    res.setHeader("Content-Type","text/html");

    res.setHeader("Content-Length",Buffer.byteLength(html));

    res.end(html);

}

function notFound(res){

    res.statusCode=404;

    res.setHeader("Content-Type","text/plain");

    res.end("notFound");

}

function badRequest(res){

    res.statusCode=400;

    res.setHeader("Content-Type","text/plain");

    res.end("Bad Request");

}

function add(req,res){

    var body='';

    req.setEncoding("utf-8");

    req.on("data",function(chunk){

        console.log("chunk",chunk);

        body+=chunk;

    })

    req.on("end",function(){

        var obj=qs.parse(body);

        items.push(obj.item);

        show(res);

    })

}

求教——使用node做表单，刷新浏览器页面，浏览器为什么会重复提交上次所填的信息的更多相关文章

  1. node.js表单——formidable/////z

    node.js表单--formidable   node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...

  2. node.js表单——formidable

    node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装package的路径分为两种,一种是本地目录,一种是全局 ...

  3. 不用写代码也能做表单 —— 加载meta即可

    做增删改查要写多少代码? 一个表单一套代码,十个表单十套代码吗? 我这么懒,怎么会写这么多代码? 我想做到:即使一百个表单也只需要一套代码(而且不需要复制粘贴).实现多个表单,只需要加载不同的meta ...

  4. [转载]WebBrowser控件表单（form）的自动填写和提交

    话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这个ActiveX控件了.这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢). ...

  5. SharePoint 2013 修改表单认证登录页面

    前 言 之前的博客我们介绍了如何为SharePoint配置表单登陆,但是,登陆页面是丑.很丑.非常丑.特别非常丑!我们现在就介绍一下如何定制SharePoint表单登陆页面! SharePoint 表 ...

  6. SharePoint 2013 改动表单认证登录页面

    前 言 之前的博客我们介绍了怎样为SharePoint配置表单登陆,可是.登陆页面是丑.非常丑.非常丑.特别非常丑! 我们如今就介绍一下怎样定制SharePoint表单登陆页面! SharePoint ...

  7. RookeyFrame Bug 表单管理 -> 查看表单 ->编辑字段页面 JS报错

    表单管理 -> 查看表单 ->编辑字段页面 小bug onchange里面直接就是方法,修改:去掉外面的function(){},直接把方法体写在onchange里面就可以了. 后台方法: ...

  8. bootstrapValidator.js 做表单验证

    有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是b ...

  9. node处理表单文件，获取formdata的数据

    参考文章:https://blog.csdn.net/a895458278/article/details/48055143# 应用: formidable使用: 原生的node.js在处理客户端以P ...

随机推荐

  1. dp4

    T1.机器分配(machine) 题目大意:把N台机器分给M个公司,每个公司分到不同数量机器有不同利润,求分配的最大利润. N<=100,M<=100 解题思路:一眼题啊.设a[x][y] ...

  2. Excel jxl导入导出

    JAVA EXCEL API简介 Java Excel是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Wind ...

  3. mysql 不是主键不能删除的保护问题解决办法？

       select * from t_answerexams;      delete from  t_answerexams  where  selectid = 'c4582502-8b27-44 ...

  4. 网络存储技术介绍(2) ( based on zt)

    http://www.educity.cn/tx/429084.html 互联网技术DAS.NAS和SAN存储方案的比较 按照设备位置和接入方式,磁盘存储可以分为内置存储和外挂存储,外挂存储又分为直连 ...

  5. mysql 主从复制 实践

    异步主从复制   主从部署步骤: 备份还原 使用mysqldump或者xtrabackup 把主库现有基础数据还原到从库 授权 grant replication slave on *.* 给从库一个 ...

  6. 【转】常用css命名规则

    常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...

  7. VC++ 动态创建单个工具条,并加载外部的位图（bmp）文件为工具栏图像

    步骤: 1, 在框架类CMainFrame头文件里,增加图像变量和工具条变量. CMFCToolBarImages m_UserImages; CMFCToolBar m_wndToolBar; 2, ...

  8. [转载] Android中Xposed框架篇---利用Xposed框架实现拦截系统方法

    本文转载自: http://www.wjdiankong.cn/android%E4%B8%ADxposed%E6%A1%86%E6%9E%B6%E7%AF%87-%E5%88%A9%E7%94%A8 ...

  9. Linux程序包管理初步-yum的使用

    何为yum? yum:由yellow dog研发,全称Yellowdog Update Modifier 是rhel系列系统上rpm包管理器的前端工具,可用来自动解决依赖关系,从而更好的实现程序包的安 ...

  10. Android WebView 实现缓存网页数据

    WebView中存在着两种缓存:网页数据缓存(存储打开过的页面及资源),H5缓存(即AppCache). 将我们浏览过的网页url已经网页文件(css.图片.js等)保存到数据库表中 缓存模式(5种) ...