将 HTML5 地理定位结果发送回 Node/Express 服务器答案

【问题标题】：Sending HTML5 geolocation results back to Node/Express Server将 HTML5 地理定位结果发送回 Node/Express 服务器
【发布时间】：2016-07-06 21:59:57
【问题描述】：

我正在使用 HTML5 地理位置来检索用户 lat/lng，并希望将其传回服务器以将其与商店 lat/lngs 坐标列表进行比较并返回最接近的 5 个。地理位置 API 正在返回 lat/lng 坐标客户端，完全没有问题，我只是找不到将信息返回到服务器并同时呈现新页面的方法。我尝试使用 $.post 方法，将坐标附加到数据：对象。

客户端Javascript

function sendToServer(lat,lng){
     $.ajax({
          type: "POST",
          url: "/search",
          data: {lat: lat, lng: lng},
          success: function(data){
               alert('Successful');
          },
     });
}

我可以从 console.log 调用服务器端看到坐标已成功传递。 server.js

app.post('/search', function(req,res){
     console.log(req.body);                           <-- does show lat/lng coords
     res.render('./pages/search' , {
          shops: coords.getNearestFive(req.body)      <-- just to give idea 
     });
});

我只通过渲染传递了 stores 对象，让您了解我打算如何处理数据，我还没有尝试过。

'./pages/search' 不会呈现给客户端，我已阅读其他帖子，建议使用 $.ajax 不是尝试执行此操作的好方法，但是我找不到解决方案。我尝试使用“GET”方法，但即使页面加载正确，我也无法从服务器端检索纬度/经度坐标。奇怪的是我已经使用谷歌网络工具检查了请求/响应，并且响应确实显示了渲染的“./pages/search”，但这并没有反映在浏览器中。

这是我的锚点，用作获取坐标的按钮

<a href="/search" class="geoSearch"> Find My Location! </a>

有谁知道，我如何通过并获取坐标以及能够加载所选页面？谢谢

**** 更新****

通过使用 req.query 并将 res.render() 调用包装在 setTimeout 函数中，我已经设法从服务器端获取 lat/lng 详细信息，这确实让人感觉很hacky。

app.get('/search', function(req,res){
     console.log(req.query);             <-- logs passed lat/lng
     res.render('./pages/search');
});

客户端点击处理程序

$('.geoSearch').on('click', function(){
     getCoords();
});

客户端ajax请求

function sendToServer(lat,lng){
     $.ajax({
          type: "GET",
          url: "/search",
          contentType: "application/json",
          data: JSON.stringify({lat: lat, lng: lng}),
          success: function(data){
               alert('Successful');
          },
     });
}

服务器端

app.get('/search', function(req,res){
     var beQuick = req.query;
     console.log(beQuick);
     setTimeout(function(){              
          res.render('./pages/search');
     },1000);
});

是否有更好的方法允许 req.query 填充变量服务器端而不必通过 setTimeout 在呈现新页面时添加延迟？谢谢

【问题讨论】：

标签： ajax node.js html express

【解决方案1】：

如果其他人遇到此类问题，我发现了一种使用 websocket 来回传递数据的相对简单的方法。为此，您需要将 socket.io 作为项目中的依赖项和一些额外的代码。

服务器端 JS

//allow socket IO to latch onto HTTP server
var server = http.createServer(NYise);
var io = require('socket.io').listen(server);

//reacts to an event emitted on the client side 
io.on('connection', function(socket){
     socket.on('coords', function(yourDataPassed){
          //whatever you intened to do with your data
     });
});

客户端 JS

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>


     //emit back to server  <-- my code is held in another function. 
     var socket = io();
     socket.emit('coords', {lat: lat, lng: lng});

我的代码保存在不同的函数中，因此可能看起来很混乱。更多信息的 SocketIO 文档链接 - http://socket.io/docs/。

【讨论】：