Question

我正在使用nodejs上的ajax，所以我可以更好地理解节点。

表格（客户端）

<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>

<script type="text/javascript">

document.getElementById("submit").onclick = handleButtonPress;

//var httpRequest;

function handleButtonPress(e) {
        e.preventDefault();
    var formData = "";
    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", "/", 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="+encodeURIComponent(formData));

}
</script>

只是带有字段的表单，每个字段都有一个数字。 JS创建了一个json结构。 formData包含bananas=2&apples=5&cherries=20。

现在，这是我的简约服务器。它有效，但我如何通过request访问来自表单的数据？

此外，在客户端，我不会在＆＃34;结果＆＃34;中得到rrr。 div，我再次获得整个html页面，我再次收到该表单。这是为什么？我不懂。

我想了解节点，所以请不要建议我使用Express或其他模块。我想知道为什么这个简单的代码不起作用

提前致谢

服务器

//requires
var http = require ('http');
var fs = require ('fs');
var path = require ('path');
var mime = require ('mime');

//set server
var server = http.createServer(function (request, response){
    var filePath = false;
    if (request.url == '/'){
        filePath='public/index.html';//default static file
    }
    else{
        filePath='public'+request.url;//set relative file path
    }
    var absPath = './'+filePath;
    serveStatic(request, response, cache, absPath);

});

server.listen(4000, function(){
    console.log("Chatrooms server on port 4000");
    }
);

//read the file 
function serveStatic(request, response,cache, absPath){
    fs.readFile(absPath, function(err, data){
            sendFile(request, response, absPath, data);

    })
}

//serve the file
function sendFile(request, response, filePath, fileContents){
    response.writeHead(
        200,{"content-type":mime.lookup(path.basename(filePath))}
    );
    response.end(fileContents);     
    formPro(request, response);//now that is done sending, lets check the form
}

   function formPro(request, response){
    if (request.method=="POST"){
    var rrr="rrr";//insted of rrr, i see the form again
    response.writeHead(200,{"content-type":"text/plain"});
    response.write(rrr);
    response.end();
    }
}

编辑我想response会被覆盖。代码工作正常，但response包含rrr，但由于httpserver始终响应最后，response在末尾再次传输页面。有没有办法独立监听表单事件，而不使用httpserver？

Answer 1

<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 = "";
    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);
    document.getElementById("de").innerHTML = formData;
    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 = " ";
            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
        sendThis(response, filePath);
        return; 
    }   
    if (request.url == '/formHandler'){
        var body='';
        if (request.method=="POST"){
            request.on('data', function (data) {
                body += data;
            });
            request.on('end', function () {
              var aa = qs.parse(body);
              var c= aa['apples'];
              response.writeHead(200,{ 'Content-Type': 'text/plain' });
              response.end(c, "utf-8");
            });
        }
        return;
    }       
    else{       
        filePath='public'+request.url+'.html';//set relative file path
        sendThis(response, filePath);
        return; 
    }
});

server.listen(4000, function(){
    console.log("Chatrooms server on port 4000");
    }
);


function sendThis(response, filePath){
        var stream = fs.createReadStream(filePath);
        stream.pipe(response);  
        stream.on('error', function(err){
            if('ENOENT'==err.code){
                response.statusCode = 404;
                response.end('not found');
            }
            else{
                response.statusCode = 500;
                response.end("Internal Server Error");
            }
        })
}

nodejs上的错误ajax响应

1 个答案: