Question

我正在使用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 )

我是NodeJ的新手，在发布此问题之前，我进行了很多搜索，未获得所需的答案。非常感谢您宝贵的时间来解决此查询。

当我单击按钮并在服务器端对其进行检查时，我没有得到期望的结果，而是得到了空值，请在这一部分帮助我！

Answer 1

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>

如何将客户端数据发送到服务器端

1 个答案: