[英]How to retrieve data from post request in javascript
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. 有人可以告诉我如何使用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. 它是一个Express应用程序。
app.post('/createGame', function (req, res) {
//how to get data from req object.
res.render('server.jade');
});
You can use the body-parser middleware https://github.com/senchalabs/connect?source=c#middleware 您可以使用主体解析器中间件https://github.com/senchalabs/connect?source=c#middleware
Then do req.body
for the post data. 然后对req.body
数据执行req.body
。
For node.js there is at least busboy (and connect-busboy if you are using Express). 对于node.js,至少有busboy (如果使用Express,则为connect-busboy )。 I am also working on reformed which provides a layer on top of busboy. 我也在进行改革 ,该改革提供了busboy之上的一层。
There are multiple ways to handle this depending on what you are looking for. 有多种处理方法,具体取决于您要寻找的内容。
Method 1: 方法1:
You can use JavaScript to cancel form submission, read input values from the form, then submit the form via Ajax post request. 您可以使用JavaScript取消表单提交,从表单中读取输入值,然后通过Ajax发布请求提交表单。
$('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: 方法2:
You can point your form to an invisible iframe then read it from the iframe. 您可以将表单指向不可见的iframe,然后从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? 这里还有一个更详细的问题: 如何发布到iframe?
A caveat of method 2 is that the browser is open to do stuff with it before you get to handle the content. 方法2的一个警告是,浏览器是开放的,可以在您处理内容之前对其进行处理。 You need to set the content-type header on your response to text/plain to prevent browser from messing with it. 您需要在对text / plain的响应中设置content-type标头,以防止浏览器将其弄乱。
Disclaimer: Above code is not tested. 免责声明:上面的代码未经测试。
There are multiple ways to handle this depending on what you are looking for. 有多种处理方法,具体取决于您要寻找的内容。
Method 1: 方法1:
You can use JavaScript to cancel form submission, read input values from the form, then submit the form via Ajax post request. 您可以使用JavaScript取消表单提交,从表单中读取输入值,然后通过Ajax发布请求提交表单。
$('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: 方法2:
You can point your form to an invisible iframe then read it from the iframe. 您可以将表单指向不可见的iframe,然后从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? 这里还有一个更详细的问题:如何发布到iframe?
A caveat of method 2 is that the browser is open to do stuff with it before you get to handle the content. 方法2的一个警告是,浏览器是开放的,可以在您处理内容之前对其进行处理。 You need to set the content-type header on your response to text/plain to prevent browser from messing with it. 您需要在对text / plain的响应中设置content-type标头,以防止浏览器将其弄乱。
Disclaimer: Above code is not tested. 免责声明:上面的代码未经测试。
above answer could works! 以上答案可能有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.