Προς το περιεχόμενο

Προτεινόμενες αναρτήσεις

Δημοσ. (επεξεργασμένο)

Θελωντας να πειραμαστιστω με node (μπας κ τον κατακτησω ποτε) εφτιαξα μια φορμα, καθε πεδιο εχει εναν αριθμο και στο τελος φτιαχνει κ στελνει μια δομη json σε φαση bananas=2&apples=5&cherries=20.

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

Μετα εχουμε τον σερβερ, εναν απλο για serving static files. Πως μπορω να εχω προσβαση στα δεδομενα της φορμας μεσω του request, κατι σαν request.data.form ή request.body.formdata ξερω γω. Ψαχνω αλλα δε μπορω να βρω κατι.

 

Επισης στη φαση που ειναι τωρα, στη function formPro η λογικη ηταν να πειραματιστω με διαφορες φορμες και να κανει προσθεση η αφαιρεση αναλογα με το αν ειναι get η post πχ if POST then addAll elseif GET then addOnlyBananasAndCherries . Μιας κ δε ξερω πως να πιασω τα δεδομενα της φορμας, λεω ας το βαλω να τυπωνει κατι απλο. Αλλα πισω στο client side δε τυπωνει rrr αλλα ολη την html της σελιδας, δλδ ξαναβλεπω τη φορμα μεσα στο results div. Γιατι ρε παιδια? 

 

Ναι, το ξερω οτι υπαρχουν modules γ αυτες τις δουλειες, και το express κτλ, αλλα θελω να μαθω ξεκινωντας απο τα βασικα κ επισης θελω να καταλαβω που κολλαει το ρημαδι ο κωδικας ετσι οπως ειναι τωρα.

 

Ευχαριστω

 

EDIT Κοιτα, λογικα το response χανει την αρχικη του τιμη. Δηλαδη εκτελειται κανονικα ο κωδικας κ αφου σερβιριστει η σελιδα, παει κ τσεκαρει τη response.method, περνει τιμη rrr κ μετα περνει παλι τη σελιδα σα τιμη, αφου ο httpserver παντα απανταει τελευταιος , ωστε να σερβιρει στατικο περιεχομενο. Υπαρχει κανας τροπος να ακους για form events ανεξαρτητα απο τον httpserver, ωστε να μη μπερδευονται τα 2 ? 

//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();
    }
}
Επεξ/σία από slevinkelevra
  • Like 1
Δημοσ.

Δύο (τουλάχιστον) περιπτώσεις: querystring & url. Και τα 2 module έχουν μεθόδους ( .parse ) που θα σε βοηθήσουν να πάρεις τα δεδομένα

 

Δεν κατάλαβα ακριβώς τι κάνεις με το request.method αλλά ο έλεγχος θα πρέπει να είναι του τύπου:

if (request.method === 'POST')

και μετά ανάλογα τι module χρησιμοποιείς θα τσεκάρεις για τα δεδομένα σου.

 

Παραδείγματα υπάρχουν αρκετά σε SO οπότε δεν υπάρχει λόγος να τα βρώ και να σου τα βάλω εδώ, θα παίξεις και θα βρεις αυτό που σου ταιριάζει.

 

Στο τέλος όμως, θα χρησιμοποιήσεις express ή κάτι ανάλογο :)

Δημοσ.

Το ιδιο απο SO που μου λες, ειχα δει και εγω.

Αλλαζω λοιπον τον httpserver και προσθετω το παρακατω

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

request.on('data', function (data) {
 body += data;
});
request.on('end', function () {
  console.log("body "+body);
  var aa = qs.parse(body);
  console.log("aa "+aa);
  console.log("banana "+aa["bananas"]);
});

});

με την body να ειναι μια global που εχω ορισει στην αρχη του κωδικα , ως var body='';

το body γεμιζει κανονικα, το aa μου δινει [object Object] και το banana undefined.

Τον κωδικα για parsing , αν τον περασω μεσα στη formPro μου δινει το body κενο κ τα υπολοιπα οπως παραπανω.

 

Το querystring το εχω κανει require μεσα στον σερβερ, το εχω περασει στο package.json και το εχω εγκαταστησει κανονικα.

 

Οποτε τι ρε συ? Ρε δε γινετε να μη μπορει να φτιαχτει ενας απλος στατικ σερβερ με ενα ajax εκει περα. Τι στο καλο δε βλεπω?

 

Και κολλημα στο parsing και δε μπορω να συγχρωνησω σωστα ωστε να στελνει πρωτα τη σελιδα κ μετα μια απαντηση απο την formPro. Που να παω να κρυφτω δηλαδη? 

Δημοσ.

ΟΚ, ΟΚ, το παρακτω λυνει αρκετα προβληματα. Credits στην απαντηση του OrangeDog Link.png Site: εδω , στην απαντηση του ampersand Link.png Site: εδω και στο βιβλιο "Node.js in Action" , Mike Cantelon, Marc Harter, T.J. Holowaychuk and Nathan Rajlich, ©2014, Manning Publications, κεφαλαια 4.3 - 4.4

 

client

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

server

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

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...