我正在玩nodejs,创建一个简单的服务器,也处理一些ajax。当我转到localhost:4000
时,页面无法呈现,而是自动下载空文件。它命名为"下载文件",零字节,没有扩展名。
我认为我的客户端和我的服务器非常简单。对于一般性问题,我很抱歉,但我不明白为什么会这样。
提前致谢
客户端 - 一个简单的表单和一个发送json类型数据的XHR
<html>
<head> <title>Chatrooms</title> </head>
<body>
<form id="fruitform" method="post" action="/">
<div class="table">
<div class="row">
<div class="cell label">Bananas:</div>
<div class="cell"><input name="bananas" value="2"/></div>
</div>
<div class="row">
<div class="cell label">Apples:</div>
<div class="cell"><input name="apples" value="5"/></div>
</div>
<div class="row">
<div class="cell label">Cherries:</div>
<div class="cell"><input name="cherries" value="20"/></div>
</div>
<div class="row">
<div class="cell label">Total:</div>
<div id="results" class="cell">0 items</div>
</div>
</div>
<button id="submit" type="button">Submit Form</button>
</form>
<div id="results"></div>
<div id="de"></div>
</body>
</html>
<script type="text/javascript">
document.getElementById("submit").onclick = handleButtonPress;
function handleButtonPress(e) {
e.preventDefault();
var formData = "";
//gather all input values in a json type string
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++) {
formData += inputElements[i].name + "=" + inputElements[i].value + "&";
}
formData = formData.slice(0, -1);
var hr = new XMLHttpRequest();
hr.open("POST", "/formHandler", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
document.getElementById("results").innerHTML = hr.responseText;
}
}
hr.send(formData);
}
</script>
服务器
//dependencies
var http = require ('http');
var fs = require ('fs');
var path = require ('path');
var mime = require ('mime');
var qs = require('querystring');
//this is the http server
var server = http.createServer(function (request, response){
var filePath = false;
if (request.url == '/'){
filePath='public/index.html';//default static file
}
if (request.url == '/formHandler'){//handle XHR
if (request.method=="POST"){
var rrr="rrr";
response.writeHead(200,{"content-type":"text/plain"});
response.write(rrr);
response.end(rrr);
}
}
else{
filePath='public'+request.url;//set relative file path
}
var absPath = './'+filePath;
serveStatic(request, response, cache, absPath);//serve the static file
});
server.listen(4000, function(){
console.log("Chatrooms server on port 4000");
}
);
//read static files
function serveStatic(request, response,cache, absPath){
fs.readFile(absPath, function(err, data){
sendFile(request, response, absPath, data);
})
}
//serve file data
function sendFile(request, response, filePath, fileContents){
response.writeHead(
200,{"content-type":mime.lookup(path.basename(filePath))}
);
response.end(fileContents);
}
UPDATE 如果我从服务器中删除以下部分,它可以正常工作。仍然无法理解发生了什么
if (request.url == '/formHandler'){
console.log("inside ajax if");
console.log("inside formPro");
if (request.method=="POST"){
console.log("inside second ajax if");
var rrr="rrr";
response.writeHead(200,{"content-type":"text/plain"});
response.write(rrr);
response.end(rrr);
console.log("finished sending rrr");
}
}
答案 0 :(得分:2)
我建议你使用node express module http://expressjs.com/ 这将允许您编写自定义模板渲染器以及包括css和js图像文件的静态页面
只需使用
安装快递npm -g install express
答案 1 :(得分:1)
很可能fs.readFile
正在返回错误,您忽略了该错误。
当提供静态文件时,你不应该像这样读到整个内存。 Node.JS的重点是让I / O自由流动。
使用fs.createReadStream(filePath).pipe(response)
代替,但您需要添加错误侦听器,或在域中运行。
更新
臭虫比比皆是 - 你不会从任何情况下返回,只是继续前进到下一个。
即。您最终可以同时拨打request.end()
和serveStatic
。
答案 2 :(得分:0)
关注@Dickens,这里的答案是处理表单的基本快速应用程序以及./public/
//dependencies
var http = require ('http');
var express = require('express'); // npm install --save express
var app = express();
app.use(express.static(__dirname+'/public'));
app.post('/formHandler', function(req, res){
res.status(200).send('rrr');
})
var server = http.createServer(app);
server.listen(4000, function(){
console.log("Chatrooms server on port 4000");
});
// Test with:
// curl -vX POST http://localhost:4000/formHandler
// curl -vX GET http://localhost:4000/index.html