methodOverride中间件必须结合bodyParser中间件一起使用,为bodyParser中间件提供伪HTTP方法支持.
index.html代码:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 function submitData(){ 8 var form=document.getElementById("form1"); 9 var formData=new FormData(form); 10 var xhr=new XMLHttpRequest(); 11 xhr.open("post","index.html",true); 12 xhr.onload= function () { 13 if(this.status==200) 14 document.getElementById("res").innerHTML=this.response; 15 }; 16 xhr.send(formData); 17 } 18 </script> 19 </head> 20 <body> 21 <form id="form1"> 23 姓:<input type="text" id="txtFirstName" name="firstname" value="郭" /> 24 名:<input type="text" id="txtUserName" name="username" value="延思" /> 25 <input type="button" value="提交" onclick="submitData();" /> 26 </form> 27 <div id="res"></div> 28 </body> 29 </html>
服务器段代码server.js
var express=require("express"); var fs=require("fs"); var app=express(); app.use(express.bodyParser()); app.get("/index.html", function (req,res) { res.sendfile(__dirname+"/index.html"); }); app.post("/index.html", function (req,res) { var str=""; for(var k in req.body){ str+="键是:"+k+" 值是:"+req.body[k]+"<br/>"; } res.send(str); }); app.listen(1337,"127.0.0.1", function () { console.log("开始监听1337"); });
让程序走起来:
现在对上面的代码进行修改:
1 var express=require("express"); 2 var fs=require("fs"); 3 var app=express(); 4 app.use(express.bodyParser()); 6 app.get("/index.html", function (req,res) { 7 res.sendfile(__dirname+"/index.html"); 8 }); 9 app.put("/index.html", function (req,res) { 10 var str=""; 11 for(var k in req.body){ 12 str+="键是:"+k+" 值是:"+req.body[k]+"<br/>"; 13 } 14 res.send(str); 15 }); 16 app.listen(1337,"127.0.0.1", function () { 17 console.log("开始监听1337"); 18 });
现在单击按钮后,会出现404错误,因为我们单击出发的是post,而服务器上是put事件.
现在想让服务器端依然是put接受,html上依然是post请求.
可以对代码作一下修改:
1 var express=require("express"); 2 var fs=require("fs"); 3 var app=express(); 4 app.use(express.bodyParser()); 5 app.use(express.methodOverride("test")); 6 app.get("/index.html", function (req,res) { 7 res.sendfile(__dirname+"/index.html"); 8 }); 9 app.post("/index.html", function (req,res) { 10 var str=""; 11 for(var k in req.body){ 12 str+="键是:"+k+" 值是:"+req.body[k]+"<br/>"; 13 } 14 res.send(str); 15 }); 16 17 app.listen(1337,"127.0.0.1", function () { 18 console.log("开始监听1337"); 19 });
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>向服务器上传文件</title>
<script type="text/javascript">
function submitData(){
var form=document.getElementById("form1");
var formData=new FormData(form);
var xhr=new XMLHttpRequest();
xhr.open("post","index.html",true);
xhr.onload= function () {
if(this.status==200)
document.getElementById("res").innerHTML=this.response;
};
xhr.send(formData);
}
</script>
</head>
<body>
<form id="form1">
<input type="hidden" name="test" value="put"/>
姓:<input type="text" id="txtFirstName" name="firstname" value="郭" />
名:<input type="text" id="txtUserName" name="username" value="延思" />
<input type="button" value="提交" onclick="submitData();" />
</form>
<div id="res"></div>
</body>
</html>
让程序跑起来 就和一开始的结果是一样的了.