使用node做表单,刷新浏览器页面,浏览器为什么会重复提交上次所填的信息
发布于 2 个月前 作者 ggwork 231 次浏览 来自 问答

首先吐槽下,这个论坛登录是在是太难了,上午我搞了好久都没登录上来。一会注册一会使用github搞的有点晕 最近在学些node,按照《nodejs实战》第四章上的代码做练习,发现有表单重复提交的问题

第一次打开页面,显示如图,查看network是get请求 a.png        图1

现在我们提交aaa,显示如图,查看network是post请求 b.png         图2

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

c.png       图3

不断的刷就这样了,求教这个是为什么? d.png       图4 代码如下

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);
    })
}
2 回复

如果是一个简单的表单提交 为什么要用querystring 很多第三方模块不了解的话 用了会出很大的问题。

首先我得支持你一下,这个论坛真是太难登陆了。其次,我要说明我是个node菜鸟,所以我说的不一定对,限于我现在的环境没法帮你测试,我只能把我想到的告诉你。 我是这样想的,页面刷新的原理其实是重复上一步的操作,你上一步操作时post操作,所以加上了aaa,我一般都是用ajax提交的,所以没遇到你这种情况,建议你用ajax提交并且获取判断下input的内容。

回到顶部