slevinkelevra Δημοσ. 10 Ιουνίου 2015 Δημοσ. 10 Ιουνίου 2015 (επεξεργασμένο) Θελωντας να πειραμαστιστω με 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(); } } Επεξ/σία 10 Ιουνίου 2015 από slevinkelevra 1
alou Δημοσ. 11 Ιουνίου 2015 Δημοσ. 11 Ιουνίου 2015 Δύο (τουλάχιστον) περιπτώσεις: querystring & url. Και τα 2 module έχουν μεθόδους ( .parse ) που θα σε βοηθήσουν να πάρεις τα δεδομένα Δεν κατάλαβα ακριβώς τι κάνεις με το request.method αλλά ο έλεγχος θα πρέπει να είναι του τύπου: if (request.method === 'POST') και μετά ανάλογα τι module χρησιμοποιείς θα τσεκάρεις για τα δεδομένα σου. Παραδείγματα υπάρχουν αρκετά σε SO οπότε δεν υπάρχει λόγος να τα βρώ και να σου τα βάλω εδώ, θα παίξεις και θα βρεις αυτό που σου ταιριάζει. Στο τέλος όμως, θα χρησιμοποιήσεις express ή κάτι ανάλογο
slevinkelevra Δημοσ. 11 Ιουνίου 2015 Μέλος Δημοσ. 11 Ιουνίου 2015 Το ιδιο απο 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. Που να παω να κρυφτω δηλαδη?
slevinkelevra Δημοσ. 13 Ιουνίου 2015 Μέλος Δημοσ. 13 Ιουνίου 2015 ΟΚ, ΟΚ, το παρακτω λυνει αρκετα προβληματα. Credits στην απαντηση του OrangeDog Site: εδω , στην απαντηση του ampersand 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"); } }) }
Προτεινόμενες αναρτήσεις
Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε
Πρέπει να είστε μέλος για να αφήσετε σχόλιο
Δημιουργία λογαριασμού
Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!
Δημιουργία νέου λογαριασμούΣύνδεση
Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.
Συνδεθείτε τώρα