неправильный ответ ajax на nodejs

Я играю с ajax на nodejs, поэтому я могу лучше понять узел.неправильный ответ ajax на nodejs

Форма (на стороне клиента)

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

Кроме того, на стороне клиента, я не получаю 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(); 
    } 
}

EDIT Я думаю response переопределены. Код работает нормально, но response содержит rrr, но поскольку httpserver всегда отвечает последним, response передает страницу снова, в конце. Есть ли способ самостоятельно слушать события формы, не используя httpserver?

источник

2015-06-10 slevin

Я думаю, что следующий код исправляет множество проблем. Кредиты и льготы для ответа OrangeDog here, ответ амперсанда here, а также книга «Node.js in Action» Майка Кантелона, Марк Хартер, T.J. Holowaychuk и Натан Райлих, © 2014 г. Manning Publications, главы 4,3 - 4,4

<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"); 
      } 
     }) 
}

источник

2015-06-12 22:44:25 slevin

неправильный ответ ajax на nodejs

ответ

Смежные вопросы