获取Node.js以从HTML文本字段获取用户输入？

Question

I've basically been trying to make a simple game where the user can submit their high-score to a Node.js server. I'm just trying to do something very simple but can't seem to find much to help me online!

At the moment I've got the main page to connect and respond to the server using AJAX.

Here's the HTML:

<div id="test"></div> 
<h3>Upload your high-score:</h3>
Your score: <input type="text" name="yourScore">
<button id="SubmitBtn" type="submit">Submit</button>

Here's the JavaScript which triggers when the "Submit" button is clicked and appends the "test" div when successfully connected (Just to show it responds):

<script> 
$(document).ready(function() {
$('#SubmitBtn').click(function (event) {
    $.ajax({ 
        url: 'http://localhost', 
        dataType: "jsonp", 
        jsonpCallback: "_testcb", 
        cache: false, 
        timeout: 5000, 
        success: function(data) { 
            $("#test").append(data); 
        }, 
        error: function(jqXHR, textStatus, errorThrown) { 
            alert('Error connecting to the Node.js server... ' + textStatus + " " + errorThrown); 
        } 
    }); 
});

});

And here's my Node.js at the moment where it runs and responds:

var http = require('http'); 
console.log('Game server running...'); 
http.createServer(function (req, res) { 
console.log('Submit button has been clicked.'); 
res.writeHead(200, {'Content-Type': 'text/plain'}); 
res.end('_testcb(\'{"message": "Welcome! Node.js Responding!"}\')'); 
}).listen(80); 

So yeah, if anyone knows how I can get my Node.js server to read the data in the "yourScore" text field and when the "SubmitBtn" button has been clicked to send the data to the server, I would be most thankful!

Answer 1

First

You are not sending any data with your AJAX request.

Possible solution (it is better if you get score input element using an ID or serializing the form element):

$.ajax({ 
    url: 'http://localhost',
    data: { score : $("input[name='score']").val() },
    dataType: "jsonp", 
    jsonpCallback: "_testcb", 
    cache: false, 
    timeout: 5000, 
    success: function(data) { 
        $("#test").append(data); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
        alert('Error connecting to the Node.js server... ' + textStatus + " " + errorThrown); 
    } 
});

Second

Inside your NodeJS request handler you can get the sent data using the request object.

Possible solution:

var http = require('http'); 
http.createServer(function (req, res) {
      var score = req.body.score;
      console.log(score);
      //do whatever you want
      res.writeHead(200, {'Content-Type': 'text/plain'}); 
      res.end('_testcb(\'{"message": "Welcome! Node.js Responding!"}\')'); 
}).listen(80); 

Answer 2

You need to send a POST to the server, check out this simple example

in your script:

$.ajax({
    type: "POST",
    data: {
        yourScore: $('input[name="yourScore"]').val()
    }, 
    //other parameters

and in your server

http.createServer(
   //...
   if (req.method == 'POST'){
      console.log(req.body.yourScore)