求教——使用node做表单,刷新浏览器页面,浏览器为什么会重复提交上次所填的信息

最近在学些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);
    })
}
时间: 2024-10-22 07:05:49

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

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

node.js表单——formidable node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装package的路径分为两种,一种是本地目录,一种是全局目录. npm install xxx -g 命令将模块下载安装到全局目录中. 全局目录可以通过 npm config set prefix "目录路径" 来设置. 通过 npm config get prefix 来获取当前设置的目录. npm

node.js表单——formidable

node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装package的路径分为两种,一种是本地目录,一种是全局目录. npm install xxx -g 命令将模块下载安装到全局目录中. 全局目录可以通过 npm config set prefix "目录路径" 来设置. 通过 npm config get prefix 来获取当前设置的目录. npm install xxx ,则是将模块下载到

【jQuery】利用表单的序列化根据name取表单,做表单的验证

在前台做表单的验证的方式有很多种,具体思想是你先要把表单的要验证项里面的值取出来,然后再脚本处进行判断,最后根据判断结果告警,然后给onsubmit="return XX()"那个函数,返回true与false的布尔值.整个过程,把表单的要验证项取出来是关键.在<[JavaScript]表单即时验证,不成功不让提交>(点击打开链接)中利用了id取每一个表单项的属性,这是最基础的,但是如果需要以name的方法取出表单的项呢?此时,你可以利用jQuery的序列化,根据name来

[转载]WebBrowser控件表单(form)的自动填写和提交

话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这个ActiveX控件了.这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢).那么,无论我们是想做一个"定制版IE",还是希望利用HTML来做用户界面(指WinApp而非WebApp.许多单机软件,包括Windows的帮助支持中心,都是HTML做的),都少不了Windows Form和包含在WebBrowser中的Web页面的交互.本文将通过几个实际的例子,初步介绍

表单布局和页面布局

一.表单布局 1.简单的表单布局 <style> //将浏览器默认的样式清零 input { padding: 0; margin: 0; width: 20em; } //由于input[type="text"]设置了宽度,所以不能给单选和复选等表单元素设置宽度 input[type="radio"] { width: auto; margin: 0 1em 0 0; } input[type="checkbox"] { width

RookeyFrame Bug 表单管理 -&gt; 查看表单 -&gt;编辑字段页面

表单管理 -> 查看表单 ->编辑字段页面 小bug onchange里面直接就是方法,修改:去掉外面的function(){},直接把方法体写在onchange里面就可以了. 后台方法: 位置:Rookey.Frame.UIOperate\EasyUI\UIFrameFactory.cs 里面的这个GetFormFieldInputHTML方法 以前是这样: string onchangeStr = "onchange=\"function(){if(typeof(OnF

bootstrapValidator.js 做表单验证

有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是bootstrapValidator.js. 直接上手写代码. 1.首先 jquery,bootstrap 以及bootstrapValidator(地址https://github.com/nghuuphuoc/bootstrapvalidator) 2.引用jquery bootstrap  bo

iview DatePicker type 为dateTime 时无法做表单验证!

在做修改数据的对话框中表单校验时,日期时间验证不了小图标一直在打转,因为我后台获取到的数据(是字符串的格式),应该将获取到的字符串格式的数据放到new Data()中(转为标准时间格式),就可以通过验证了,也可以正常提交表单了. <FormItem prop="beginDate"> <DatePicker type="datetime" v-model="formValidate.beginDate" placeholder=

序列化表单为json对象,datagrid带额外参提交一次查询 后台用Spring data JPA 实现带条件的分页查询

查询窗口中可以设置很多查询条件 表单中输入的内容转为datagrid的load方法所需的查询条件向原请求地址再次提出新的查询,将结果显示在datagrid中 转换方法看代码注释 <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"&g