如何将客户端数据发送到服务器端
我在HTML5中使用Geolocation API，但主要问题是，我想在我的数据库中存储地理定位Api的结果。所以我的主要问题是如何将这些细节或结果发送到我的主文件（服务器端）？
我创建了一个空表单，通过脚本标记，我插入了两个输入隐藏标记，并通过使用ID选择标记将结果存储在其中，只需将其值更改为我想要的结果即可。但我在后端文件中得到空字符串。
// EJS FILE
<body>
<p>Click to get your coordinates.</p>
<form action="/" method="POST">
<input type="hidden" name="lat" id="lat" value="">
<input type="hidden" name="long" id="long" value="">
<input type="hidden" name="test" id="test"value="">
<button type="submit" onclick="Onclick()">Try It</button>
</form>
<p id="demo"></p>
<script>
function Onclick(){
var x = document.getElementById("lat");
var y = document.getElementById("long");
var z = document.getElementById("test");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
console.log(position.coords);
x.value = position.coords.latitude
y.value = position.coords.longitude;
});
} else
z.value = "Geolocation is not supported by this browser.";
}
</script>
(Please give me answer in JS only )
我是NodeJs的新手，在发布这个问题之前我搜索了很多，没有得到所需的答案。我非常感谢您花时间解决这些疑问。
当我点击按钮并在服务器端检查它，而不是获得所需的结果，我得到空值，请帮助我这一部分！
回答如下：getCurrentPosition是一个异步函数，这意味着：
- 单击按钮
Onclick功能开火- 表格提交
- 设置表单值的回调函数运行（或者如果你没有离开页面则运行）
在数据可用之前，您需要避免提交表单。
- 使用
addEventListener绑定您的事件处理程序 - 防止表单的默认行为
- 数据可用后，使用JS重新提交表单
// Bind the event listener here
var form = document.querySelector('form');
form.addEventListener("submit", submit_geo_coords);
// Add the event paramater to the function
function submit_geo_coords(event) {
event.preventDefault(); // Stop normal submission of the form
var x = document.getElementById("lat");
var y = document.getElementById("long");
var z = document.getElementById("test");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords);
x.value = position.coords.latitude
y.value = position.coords.longitude;
form.submit(); // Resubmit the form when the data is available
});
} else
z.value = "Geolocation is not supported by this browser.";
}<p>Click to get your coordinates.</p>
<form action="/" method="POST">
<input type="hidden" name="lat" id="lat" value="">
<input type="hidden" name="long" id="long" value="">
<input type="hidden" name="test" id="test" value="">
<button type="submit">Try It</button>
</form>
如何将客户端数据发送到服务器端
我在HTML5中使用Geolocation API，但主要问题是，我想在我的数据库中存储地理定位Api的结果。所以我的主要问题是如何将这些细节或结果发送到我的主文件（服务器端）？
我创建了一个空表单，通过脚本标记，我插入了两个输入隐藏标记，并通过使用ID选择标记将结果存储在其中，只需将其值更改为我想要的结果即可。但我在后端文件中得到空字符串。
// EJS FILE
<body>
<p>Click to get your coordinates.</p>
<form action="/" method="POST">
<input type="hidden" name="lat" id="lat" value="">
<input type="hidden" name="long" id="long" value="">
<input type="hidden" name="test" id="test"value="">
<button type="submit" onclick="Onclick()">Try It</button>
</form>
<p id="demo"></p>
<script>
function Onclick(){
var x = document.getElementById("lat");
var y = document.getElementById("long");
var z = document.getElementById("test");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
console.log(position.coords);
x.value = position.coords.latitude
y.value = position.coords.longitude;
});
} else
z.value = "Geolocation is not supported by this browser.";
}
</script>
(Please give me answer in JS only )
我是NodeJs的新手，在发布这个问题之前我搜索了很多，没有得到所需的答案。我非常感谢您花时间解决这些疑问。
当我点击按钮并在服务器端检查它，而不是获得所需的结果，我得到空值，请帮助我这一部分！
回答如下：getCurrentPosition是一个异步函数，这意味着：
- 单击按钮
Onclick功能开火- 表格提交
- 设置表单值的回调函数运行（或者如果你没有离开页面则运行）
在数据可用之前，您需要避免提交表单。
- 使用
addEventListener绑定您的事件处理程序 - 防止表单的默认行为
- 数据可用后，使用JS重新提交表单
// Bind the event listener here
var form = document.querySelector('form');
form.addEventListener("submit", submit_geo_coords);
// Add the event paramater to the function
function submit_geo_coords(event) {
event.preventDefault(); // Stop normal submission of the form
var x = document.getElementById("lat");
var y = document.getElementById("long");
var z = document.getElementById("test");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords);
x.value = position.coords.latitude
y.value = position.coords.longitude;
form.submit(); // Resubmit the form when the data is available
});
} else
z.value = "Geolocation is not supported by this browser.";
}<p>Click to get your coordinates.</p>
<form action="/" method="POST">
<input type="hidden" name="lat" id="lat" value="">
<input type="hidden" name="long" id="long" value="">
<input type="hidden" name="test" id="test" value="">
<button type="submit">Try It</button>
</form>