使用node做表单,刷新浏览器页面,浏览器为什么会重复提交上次所填的信息
首先吐槽下,这个论坛登录是在是太难了,上午我搞了好久都没登录上来。一会注册一会使用github搞的有点晕 最近在学些node,按照《nodejs实战》第四章上的代码做练习,发现有表单重复提交的问题
第一次打开页面,显示如图,查看network是get请求 图1
现在我们提交aaa,显示如图,查看network是post请求 图2
刷新页面,应该显示图1的,结果缺是下面这张图,post请求。即使是按ctrl+f5刷新没用,浏览器还是重复提交了上次的内容,显示如图
图3
不断的刷就这样了,求教这个是为什么? 图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的内容。