2016-07-05 5 views
0

私はHTML5ジオロケーションを使用してユーザーlat/lngを取得しています。これをサーバーに戻して、サーバーの緯度/経度座標のリストと比較して返します最も近い5。 ジオロケーションAPIは、問題のないlat/lng cooridinatesクライアント側を返すため、情報をサーバーに戻して同時に新しいページをレンダリングする方法を見つけることができません。 私は$ .postメソッドを使って、coordsをdata:objectに付けてみました。HTML5のジオロケーション結果をノード/エクスプレスサーバーに送り返す

クライアント側のJavaScript

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

私はCOORDSが正常に渡されていることに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 
    }); 
}); 

は、私は唯一のお店はあなたに私はデータと先となるつもりかのアイデアを与えるためにレンダリングしてオブジェクトを通過してきた、私はまだこれを試していません。

'./pages/search'はクライアントにレンダリングされません。私は$ .ajaxを使用することを提案する他の投稿を読んだことがありますが、解決策を見つけることができません。私は 'GET'メソッドを使用してみましたが、ページが正しく読み込まれても、サーバ側から緯度/経度座標を取得することはできません。 私はGoogleネットワークツールを使用して要求/応答をチェックしており、repsonseはレンダリングされた './pages/search'を表示していますが、これはブラウザには反映されていません。

これはcoordsの

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

を取得するには、ボタンとして機能し、私のアンカーは、私が選択したページをロードすることができることだけでなく、座標を渡してもらうことができるか、誰もが知っていますか?おかげ

****アップデート****私はsetTimeout関数でres.render()の呼び出しをreq.queryを使用してラップすることにより、サーバーサイドから出て緯度/経度の詳細を取得するために管理している

本当にかわいいと感じます。

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が変数サーバーサイドを埋めるために可能にする良い方法はありますhなし新しいページをレンダリングするときに、setTimeoutを介して遅延を追加することはできますか?ありがとう

答えて

0

他の誰かがこのタイプの問題を抱えている場合は、Webソケットを使用してデータを前後に渡す比較的簡単な方法を見つけました。 これには、プロジェクトに依存する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/

関連する問題