javascript - Get Node.js to get user's input from a HTML text field? - Stack Overflow

admin管理员组

文章数量:1391956

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": "Wele! 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!

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": "Wele! 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!

• javascript
• ajax
• node.js

Share Improve this question Follow asked Dec 5, 2013 at 10:21 MikeMike 2711 gold badge11 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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": "Wele! Node.js Responding!"}\')'); 
}).listen(80); 

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)

本文标签： javascriptGet Nodejs to get user39s input from a HTML text fieldStack Overflow