将HTML5地理位置结果发送回Node / Express Server

时间:2016-07-05 23:48:28

标签: ajax node.js html5 express

我正在使用HTML5地理定位来检索用户lat / lng,并希望将其传递回服务器,以将其与商店lat / lngs coords列表进行比较,并返回最近的五个。 地理位置API正在返回lat / lng cooridinates客户端而没有任何问题,我只是找不到将信息返回给服务器并同时呈现新页面的方法。 我尝试使用$ .post方法,将coords附加到data:object。

客户端Javascript

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

我可以从console.log调用服务器端看到coords正在成功传递。的 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 
     });
});

我只通过商店对象传递渲染,让你知道我打算用数据做什么,我还没试过。

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

这是我的锚点,可作为获取指示符的按钮

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

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

****更新****

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

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

Clientside click handler

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

Clientside ajax request

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

Serverside

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

是否有更好的方法允许req.query填充变量服务器端而无需在渲染新页面时通过setTimeout添加延迟?感谢

1 个答案:

答案 0 :(得分:0)

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

Serverside 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
     });
});

Clientside 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/