2

私は、ユーザーが自分の場所をサーバーに送信できるようにする基本的な機能を作成しています。サーバーはデータベースにクエリを実行し、近くの場所を返します。以下のjQuery.ajaxラッパーを使用して、サーバーにデータをPOSTしています。これはラトロンポイントの形式を取り、nodejsを使用してMongoDBでジオサーチの基礎として使用され、バックエンドで表現されます。検索結果は、クライアントに返され、createMapListings関数によってレンダリングされることを目的としています。

/ findページは、最初に、以下のコードとは別に、mongodbを介してデータベースへのGETリクエストを介してレンダリングされます。ただし、最初のレンダリングに続いて、提供された場所に応じて結果を返したいと思います。

POSTメソッドは正常に機能し、場所がサーバーに送信されます。コンソールログからコンテンツを印刷できるため、検索結果が返されます。

ただし、クライアント側で結果をレンダリングしたいと思います。前述のように、検索結果はコンソールに表示されますが、クライアントにパススルーしようとすると、データ自体を（オブジェクトの配列の形式で）#output divに表示できますが、createMapListings関数はデータをキャッチしていないようです。

実際、以下の関数は呼び出されているように見えますが、「未定義」として記述されているキャッチする必要のあるデータを含む1000行以上を出力します。res.renderとres.redirectを使用しようとしましたが、最初のケースでは、ビューがdivでレンダリングされ（これは予想どおりです）、リダイレクトが失敗します。

createMapListings関数は、たとえば、ejsテンプレートを使用して、コレクション内のすべてのオブジェクトに対して単純なGET要求がサーバーに対して行われる場合に正常に機能します。ただし、ここでの問題は、POSTリクエストと、完全なコールバックを使用して結果をAJAXリクエストに返したいという組み合わせである可能性があると思います。

以下のコードがやや鈍感である場合は、お詫び申し上げます。私は間違いなくあなたが初心者と呼ぶものです。上記の機能が不可能な場合があることを感謝します。より良い方法があれば、もちろんそれを受け入れます（おそらくres.direct）。

関連するクライアント側のスクリプトは次のとおりです。

$(document).ready(function(){

$("#geolocate").click(function(){ 
navigator.geolocation.getCurrentPosition(geolocate, function(){

        });
     });
 });

function geolocate(pos){
     var latlonpt = [];
     var x = pos.coords.latitude;
     var y = pos.coords.longitude;
     latlonpt.push(x);
     latlonpt.push(y); 

    var obj = {
    userlocation: latitudelongitudept
    };

   $.ajax({
    url: "/find",
    type: "POST",
    contentType: "application/json",
    processData: false,
    data: JSON.stringify(obj),
    complete: function (data) {
        $('#output').html(data.responseText);
        $('#infooutput').children().remove();
        createMapListings(data.responseText); 
        }
     });
 };


 function createMapListings(maps) {
 for (var i = 0; i < maps.length; i++) {
 var url = maps[i]._id;
 var fullurl = "<a href='/show?id=" + url + "'>Route</a></div>";
 var title = "<div>" + maps[i].title + " - " + fullurl +"";
 $('#infooutput').append(title);

     };
  };

 </script>

上記の.ajaxラッパーによって行われたPOSTリクエストを処理するために基本的なExpressアプリで使用される関連ルートは次のとおりです。

 exports.findbylocation = function(req, res) {
 console.log(req.body.userlocation);
 var userlocation = req.body.userlocation;
 Map.ensureIndexes;
 Map.find({loc :{ $near : userlocation }}, function(err, maps) {

 if (err) { 
          console.log(err)
          }
 else {    
       var jmaps = JSON.stringify(maps);
       console.log(jmaps);
       res.send(jmaps);
      }      
   });
};
4

2 に答える 2

4

慣例により、コールバックシグニチャのdata変数名は、解析されたHTTP応答本文を参照します。$.ajaxコールバックがオンになっているため、慣例により、complete実際には使用済みが渡さ れます。あなたは当然プロパティを取得しますが、これは有用であるために解析する必要があります。を処理し、明示的に無効にしない限り、jQueryがエンコード/エンコード解除を行います。オブジェクトを処理するだけです。トランスポート形式は通常、アプリケーションロジックにとって特に重要ではないため、これは良いことです。の代わりにを使用すると、呼び出しをより簡単に記述できます。XMLHttpRequestxhrresponseTextContent-TypeprocessDatares.json(maps)res.send(jmaps)

$.ajax({
    url:  '/find',
    type: 'POST',
    data: obj,

    success: function(data) {},
    error:   function(xhr, text, err) {}
});

dataこれは、すでに解析されて使用できるJavascriptオブジェクトです。application/x-www-form-urlencodedまた、明示的に設定するのではなく、デフォルトのリクエストを使用しますcontentType。これは、expressに関する限り同じです。つまり、 jsonの代わりにurlencodedによって解析されるだけです。

于 2012-09-28T11:40:18.590 に答える
0

クライアントシーの問題を解決したと仮定します。

エクスプレスを使用しているので、の必要はありませんのでJSON.stringfy、を使用できますres.json(maps)。

于 2012-09-28T13:47:56.983 に答える