我正在使用HTML5地理位置来检索用户经纬度,并想将其传递回服务器,以与商店经纬度坐标列表进行比较,并返回最接近的五位纬度。地理位置API返回lat / lng坐标客户端完全没有问题,我只是找不到找到将信息返回到服务器并同时渲染新页面的方法。我尝试使用$ .post方法,将坐标附加到data:对象。
客户端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
});
});
我只将shops对象与渲染一起传递给您关于我打算如何处理数据的想法,但我还没有尝试过。
'./pages/search'不会呈现给客户端,我读过其他文章,建议使用$ .ajax并不是尝试执行此操作的好方法,但是我找不到解决方案。我尝试使用'GET'方法,但是即使页面确实正确加载,我也无法从服务器端检索lat / lng坐标。奇怪的是我已经使用Google联网工具检查了请求/响应,并且响应确实显示了呈现的“ ./pages/search”,尽管这没有反映在浏览器中。
这是我的锚点,用作获取坐标的按钮
<a href="/search" class="geoSearch"> Find My Location! </a>
有谁知道,我如何传递和获取坐标以及能够加载所选页面?谢谢
**** 更新 ****
我已经设法通过使用req.query从服务器端获取经纬度详细信息,并将res.render()调用包装在setTimeout函数中,该函数的确确实很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添加延迟?谢谢
如果有人遇到这种问题,我发现了一种相对简单的方法,可以使用websockets来回传递数据。为此,您需要将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/。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句