2013-10-09 11 views
6

Tôi đang học Node.js.Gửi dữ liệu đến máy chủ Node.js từ biểu mẫu HTML

Tôi có điều này trong máy chủ của tôi:

var http = require("http"); 
var url = require("url"); 

http.createServer(function(request, response){ 
    response.writeHead(200, {"Content-Type":"text/plain"}); 
    var params = url.parse(request.url,true).query; 

    console.log(params); 

    var a = params.number1; 
    var b = params.number2; 

    var numA = new Number(a); 
    var numB = new Number(b); 

    var numOutput = new Number(numA + numB).toFixed(0); 

    response.write(numOutput); 
    response.end(); 
}).listen(10000); 

Một URL như sau: localhost:10000/?number1=50000&number2=1 vang 50001 trên trình duyệt của tôi, vì vậy nó hoạt động.

Nếu không sử dụng Express, tôi cần phải gửi những 2 params qua một hình thức sử dụng HTML.

Làm cách nào để đạt được điều này?

+1

http://stackoverflow.com/questions/15568851/how-i-can-send-data-from-html-form-to-node-js-function – Andy897

+0

@ Andy897 - đã nhìn thấy. Tuy nhiên, giáo viên của tôi không muốn tôi sử dụng Express. –

+0

http://stackoverflow.com/questions/8811213/how-to-post-a-form-from-html-into-node-js-file – Andy897

Trả lời

5

Câu trả lời đơn giản là <form method="get">. Trình duyệt sẽ chuyển dữ liệu biểu mẫu thành các tham số chuỗi truy vấn mà bạn đã xử lý.

Nếu bạn cần POST, biểu mẫu HTML được đăng dưới dạng yêu cầu tổ chức cơ thể. Trong nút, một ClientRequest (các request biến trong ví dụ của bạn) phát ra một sự kiện data mỗi khi một đoạn của cơ thể đến lúc máy chủ. Bạn sẽ không nhận được toàn bộ cơ thể cùng một lúc. Bạn phải đệm cho đến khi bạn nhận được toàn bộ cơ thể, sau đó phân tích dữ liệu.

Đây là khó khăn để có được quyền vì những thứ như chunked vs bình thường Transfer-Encoding và các trình duyệt nhiều cách khác nhau có thể gửi dữ liệu mẫu. Tôi chỉ sử dụng formidable (đó là những gì Express sử dụng đằng sau hậu trường anyway), hoặc ít nhất là nghiên cứu cách nó xử lý các bài viết hình thức nếu bạn hoàn toàn phải thực hiện của riêng bạn. (Và thực sự, thực hiện điều này chỉ dành cho mục đích giáo dục – Tôi không thể nhấn mạnh đủ mà bạn nên sử dụng đáng gờm cho bất cứ điều gì mà có thể kết thúc trong sản xuất.)

2

tôi giải quyết vấn đề của tôi theo cách này:

sum.js :

var http = require("http"); 
var url = require("url"); 

http.createServer(function(request, response){ 
    response.writeHead(200, {"Content-Type":"text/plain"}); 
    var params = url.parse(request.url,true).query; 

    console.log(params); 

    var a = params.number1; 
    var b = params.number2; 

    var numA = new Number(a); 
    var numB = new Number(b); 

    var sum = new Number(numA + numB).toFixed(0); 

    response.write(sum); 
    response.end(); 
}).listen(10001); 

index.html:

<html> 
    <head> 
      <title> Pedir random </title> 

      <script type="text/javascript"> 
       function operacion(){ 
         var n1 = document.getElementById("num1").value; 
         var n2 = document.getElementById("num2").value; 

         location.href = "http://localhost:10001" + "?number1=" + n1 + "&number2=" + n2; 
       } 
      </script> 

    </head> 

    <body> 
      <h1>Inserte dos números </h1> 
      <form id="forma1"> 
       <input type="text" id="num1"></input> 
       <input type="text" id="num2"></imput> 
       <input type="button" onClick="operacion()" id="enviar" value="enviar"></input> 
      </form> 
    </body> 

<html> 

không biết nếu nó đúng cách để làm việc đó, nhưng nó giải quyết nhu cầu của tôi.

+4

Không có lý do gì để sử dụng JavaScript trong trình duyệt như thế này. Thay đổi nó thành '

' và '' và bạn đã hoàn tất. – josh3736

2

dạng ngọc bích của bạn (giả sử bạn đang sử dụng nhanh) nên trông như thế này:

form(action="/" method="post") 
    input(name="whateverSearch" placeholder="search" autofocus) 

Sau đó, để vượt qua mới được gửi datapoint whateverSearch bạn sử dụng req.body để tìm thấy nó (xem dưới đây). Ở đây, tôi đã lấy điểm dữ liệu và đăng nhập vào giao diện điều khiển, sau đó gửi nó đến DOM, cũng như tiêu đề cho trang.

router.post('/', function(req, res) { 
    whateverSearch = req.body.whateverSearch; 
    console.log(whateverSearch); 
    res.render('index', { title: 'MyApp', inputData: whateverSearch}); 
}); 
Các vấn đề liên quan