Question

我正在使用HTML5中内置的Geolocation API，但是主要问题是，我想将Geopi Api的结果存储在我的数据库中，为了继续进行操作，我正在控制台上打印结果，但没有任何反应（在事实上，我正在获取文件未定义。）我也尝试过窗口，仍然相同的响应。其次，当我在删除脚本标签时以ejs格式运行以下代码时，出现“未定义文档”的信息。

我还选择了另一种方法来解决此问题，我制作了一个空表格，并通过脚本标签插入了两个输入隐藏标签，并通过按ID使用选择标签将结果存储在其中，并简单地将其值更改为我的预期的结果。但是我的后端文件中出现了空字符串。

（请仅在JS中给我答复）

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

<!DOCTYPE html>
<html>
<body>

<p> coordinate of your current location</p>

<p id="demo"></p>

   <% var x = document.getElementById("demo");%> 
   <%   if (navigator.geolocation) { %>
   <%     navigator.geolocation.getCurrentPosition(function(position){  %> 
   <%         x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;%> 
   <%         console.log(position);  %> 
   // Not able to print the position on the console but prints results on browser perfectly
   <%     }); %> 
   <%   } else  %> 
   <%         x.innerHTML = "Geolocation is not supported by this browser.";%> 

</body>
</html>

我在浏览器中得到了令人满意的结果，但无法在控制台上打印结果。（使用脚本标记），否则我将通过使用ejs格式得到“未定义文档”

Answer 1

在页面加载任何元素之前，在<% %>之间执行任何代码。

此行时：

<% var x = document.getElementById("demo");%>

已处理，demo元素尚不存在，这就是为什么它返回未定义的原因。

您可以通过将以下代码放在<script>标签中来解决此问题：

<script type="text/javascript"> 
var x = document.getElementById('demo') //make sure this tag is below "demo"

if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position){   
          x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; 
          console.log(position); //client side JS will never print to your terminal.  It only prints to the browser.
        }); 
      } else   
            x.innerHTML = "Geolocation is not supported by this browser.";

</script>

或者，我建议将所有JS代码存储在另一页上并在底部链接。

yourFile.js：

(function() {
    var x = document.findElementById('demo');
    ...
)}();

然后在您的ejs模板上：//在页面底部

<script src="yourFile.js" type="text/javascript"></script>

此外，要使用此方法，您需要在应用程序的根目录中建立一个public目录，然后在app.js页面上进行此操作：

app.use(express.static('public'));

最后，我强烈建议您与Node.js一起学习jQuery

如果您已经了解JS，则非常简单，因为它所做的只是为事件侦听器提供快捷方式。

JS / jQuery比较：

您只需编写document.getElementById('id')即可代替$('#id')

您可以写document.querySelector('demo').innerHTML代替$('#demo').html();

您需要做的就是将其放在代码的底部（但在JS文件的上方）：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

您可以了解有关jQuery here的更多信息。

编辑

如果您需要访问服务器上的此信息，可以通过多种方法进行。开始之前，请确保已安装body-parser，否则将无法读取服务器上的POST请求。

body-parser设置：

npm install body-parser

app.js：

const bodyParser = require('body-parser');

// support parsing of application/json type post data
app.use(bodyParser.json());

//support parsing of application/x-www-form-urlencoded post data
app.use(bodyParser.urlencoded({ extended: true }));

yourFile.html：

<form action="/location" method="POST">
    <input type="hidden" name="lat"  id="lat">
    <input type="hidden" name="long" id="long">
    <input type="hidden" name="test" id="test">
    <button id="submit_button"></button> //a button's default type = "submit"

    //you can also use a submit input like this
    <input type="submit" id="submit_button">
</form>

yourFile.js：

(function() {

    //this sets the inputs when the page loads if navigator.geolocation isn't undefined
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        document.getElementById('lat').value = position.coords.latitude;
        document.getElementById('long').value = position.coords.longitude;
      });
    } else {
      //this is to prevent the form from submitting if navigator was unsuccessful in getting location data
      //also this method uses jQuery because I don't know how to do this with JS

      $('#submit_button').on('click', function() {
        event.preventDefault(); //this replaces the 'event' (ie form submit) with whatever code is in this function

        //do something here
        alert("Geolocation is not supported by this browser.");
      });
    }

})();

app.js：

这是您处理实际POST请求的地方。单击表单按钮后，您的服务器将收到路由/location的HTTP POST请求，因为表单的action="/location"（在我的版本中）

app.post('/location', function(req, res) {
    console.log(req.body); 
    //this will print a JSON object with the values of all the inputs in the form
    res.render( ... handle the response here );
});

附带说明，如果您或任何人正在寻找好的班级来开始学习发展，请尝试this Udemy课程。它的价格约为12美元，但如果您刚入门，则值得。

注意：：您购买该课程不会给我带来任何好处，也不知道您的指导老师。我推荐它是因为它对我有帮助。

注意：上Udemy课程的费用绝不会超过15美元！！！如果他们想向您收取更多的费用，则需支付15美元，请执行以下操作：

退出Udemy
清除浏览器缓存和cookie
更改您的IP地址（您可以使用VPN或去朋友之家）
创建一个新的电子邮件/ Udemy帐户，所有价格都会为您降低

如何修复“ EJS无法访问导致文档未定义的DOM”

1 个答案:

编辑

app.js：

yourFile.html：

yourFile.js：

app.js：