How to retrieve data from post request in javascript

Question

I have a form with two fields one is text field and another is select field. on submit i am posting the form. can someone tell me how to retrieve the form data in server using javasctipt.

<form id="createGameForm" action="/createGame" method="post" data-async>
    <div><label for="serverName">Server Name:</label><input type="text" id="serverName"                                 required>
    </div>
    <div>
        <label for="noOfPlayers">Number Of Players:</label>
        <select id="noOfPlayers" required>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
    <input type="submit" value="Create Server" aria-hidden="true" form="createGameForm"    class="btn>
</form>

Its an Express app.

app.post('/createGame', function (req, res) {
    //how to get data from req object.
    res.render('server.jade');
});

Answer 1

You can use the body-parser middleware https://github.com/senchalabs/connect?source=c#middleware

Then do req.body for the post data.

Answer 2

For node.js there is at least busboy (and connect-busboy if you are using Express). I am also working on reformed which provides a layer on top of busboy.

Answer 3

There are multiple ways to handle this depending on what you are looking for.

Method 1:

You can use JavaScript to cancel form submission, read input values from the form, then submit the form via Ajax post request.

$('form').submit(function(evt) {
    evt.preventDefault() // This cancels the form request.

    $.ajax({
        type: 'POST',
        url: evt.target.action,
        data: $(evt.target).serialize(),
        success: function(data) {
             // read data here
        }
    });
})

Method 2:

You can point your form to an invisible iframe then read it from the iframe.

<form id="createGameForm" action="/createGame" method="post" data-async target="my_iframe">
    ... snip ...
</form>

<iframe name="my_iframe" src="about:blank" style="visibility: hidden;"></iframe>

Then read it

$('iframe').load(function(evt) {
    var iframe = evt.target
      , doc = iframe.contentWindow.document || iframe.contentDocument || window.frames[iframe.id].document
      , responseText = doc.body.textContent
})

There's another question here that has more details: How do you post to an iframe?

A caveat of method 2 is that the browser is open to do stuff with it before you get to handle the content. You need to set the content-type header on your response to text/plain to prevent browser from messing with it.

Disclaimer: Above code is not tested.

Answer 4

There are multiple ways to handle this depending on what you are looking for.

Method 1:

You can use JavaScript to cancel form submission, read input values from the form, then submit the form via Ajax post request.

$('form').submit(function(evt) {
    evt.preventDefault() // This cancels the form request.

$.ajax({
    type: 'POST',
    url: evt.target.action,
    data: $(evt.target).serialize(),
    success: function(data) {
         // read data here
       }
    });
})

Method 2:

You can point your form to an invisible iframe then read it from the iframe.

... snip ...

Then read it

 $('iframe').load(function(evt) { var iframe = evt.target , doc = iframe.contentWindow.document || iframe.contentDocument || window.frames[iframe.id].document , responseText = doc.body.textContent }) 

There's another question here that has more details: How do you post to an iframe?

A caveat of method 2 is that the browser is open to do stuff with it before you get to handle the content. You need to set the content-type header on your response to text/plain to prevent browser from messing with it.

Disclaimer: Above code is not tested.

above answer could works!