2016-11-17 9 views
1

私の問題は、NodeJSとMongoDBでAJAX(post)を使ってデータを取得できないことです。私はボディパーサーを使用しています。データは私の最初のドロップダウンの値に依存するので、私はポスト要求を使用します。ここで jQuery AJAXがNodeJSとMongoDBを呼び出す(POST req)

が私のコードである

NodeJS

app.get('/test', function(req, res){ 
    City.findOne({'thecity': 'Auckland'}).populate('coolplaces').exec(function(err, thecoolplace){ 
     if(err){ 
      console.log(err); 
     } else { 
      res.send(thecoolplace); 
     } 
    }); 
}); 

app.post('/testpost', function(req, res){ 
    City.findOne({'thecity': req.body.thecityname}).populate('coolplaces').exec(function(err, thecoolplace){ 
     if(err){ 
      console.log(err); 
     } else { 
      res.send(thecoolplace); 
     } 
    }); 
}); 

EJS

<select id="cities" name="thecityname"> 
     <% City.forEach(function(city){ %> 
      <option val="<%= city.thecity %>"><%= city.thecity %></option> 
     <% }); %> 
    </select> 

<select id="coolplace" name="thecities"> 

</select> 

だから基本的に、私は2ドロップダウンリストを持って、私の目標は、私の第一のドロップダウンで、それは都市が含まれています私はそれに都市名を選択すると、その都市に基づいて2番目のドロップダウンを補充する必要があります(私はデータベース上のそのデータを処理しました)。

私のNodeJSコードで見てきたように、最初はGETリクエストを使用して名前をデータベースに照会し、ハードコードされたものを 'オークランド'、ajaxコールを検索し、オークランドの2番目のドロップダウン。

私の目標は、最初のドロップダウンで選択された値に基づいて2番目のフォームに値を設定することですので、クエリ値が 'req.body.thecityname'私のタグの '名前'。第一のドロップダウン変動の値は、Ajaxがトリガされますたび

は今、これが私のAjaxコード

$('#cities').change(function(){ 
     theAjax(); 
    }); 

    function theAjax(){ 
     console.log($('#cities').val()) 

     $.ajax({ 
      type: 'POST', 
      url: '/testpost', 
      data: $('#cities').val(), 
      success: function(data){ 
       console.log(data); 
      }, 
      error: function(){ 
       alert('No data'); 
      } 
     }); 
    } 

function fillupPlaces(){ 
    var $coolplaces = $('#coolplace'); 

    $.ajax({ 
     url: '/test', 
     type: 'GET', 
     dataType: 'json', 
     success: function(data){ 
      data.coolplaces.forEach(function(thecoolplaces){ 
       $coolplaces.append('<option>' + thecoolplaces.theplacename + '</option>'); 
      }); 
     } 
    }); 
} 

で、1行目に、私はそれの価値をCONSOLE.LOG、それがの値を返します。私が選択したデータですが、Ajaxの成功では、console.log(data)は何も返しません。

第二の機能は動作しますが、私がしたいことは、市内

に基づいた場所で2番目のドロップダウンをfillupすること、であるが、ここで私が間違って何をやっている

enter image description here

スクリーンショットですか?君たちありがとう!

答えて

0

キー 'thecityname'と値を都市名として使用して、投稿データをオブジェクトに変更してみます。

function theAjax(){ 
    console.log($('#cities').val()) 

    $.ajax({ 
     type: 'POST', 
     url: '/testpost', 
     data: { 
      thecityname: $('#cities').val(), 
     }, 
     success: function(data){ 
      console.log(data); 
     }, 
     error: function(){ 
      alert('No data'); 
     } 
    }); 
} 

以下のようにconsole.logを追加すると便利です。市区町村のみがポストデータとして送信され、キー 'thecityname'を持つオブジェクトではなく、req.body.thecitynameが未定義になります。

app.post('/testpost', function(req, res){ 
    console.log('req.body.thecityname is ' + req.body.thecityname); 
    City.findOne({'thecity': req.body.thecityname}).populate('coolplaces').exec(function(err, thecoolplace){ 
     if(err){ 
      console.log(err); 
     } else { 
      res.send(thecoolplace); 
     } 
    }); 
}); 
関連する問題