Ajax、jquery、Node.js、Expressを使用したPOSTデータ

Question

私はいくつかの助けが必要です。私はこれをインターネット上で見つけたさまざまな事柄に従わせようとしていますが、そのプロセスを理解することはできません。 サインアップ直後にユーザーがリダイレクトされるカルーセルがあります。 簡単な質問を入力として質問することで、プロフィールに関する情報を得たいと思っています。 これはパグコード

body 
div(class='container fill') 
    div(id='myCarousel', class='carousel slide', data-ride='carousel', data-interval="false", data-wrap="false") 
    div(class='carousel-inner') 
     div(class='item active') 
     div(class='carousel-caption') 
      div(class='form-group', method='post') 
      h1(id='welcome') WELCOME 
      h1 
      | Tell us more about yourself 
      h2 
      | Pick any interest you like 
      label(for='shopping', class="radio-inline") 
      | Shopping 
      input(type='checkbox', id='round', name='interest_filter', value='2', checked=interest=='shopping') 

      div 
      label(for='travelling', class="radio-inline") 
      | Travelling 
      input(type='checkbox', id='round', name='interest_filter', value='3', checked=interest=='travelling') 

      div 
      label(for='musique', class="radio-inline") 
      | Musique 
      input(type='checkbox', id='round', name='interest_filter', value='4', checked=interest=='musique') 

      div 
      label(for='cooking', class="radio-inline") 
      | Cooking 
      input(type='checkbox', id='round', name='interest_filter', value='5', checked=interest=='cooking') 

      div 
      label(for='nature', class="radio-inline") 
      | Nature 
      input(type='checkbox', id='round', name='interest_filter', value='6', checked=interest=='nature') 

      div 
      label(for='arts', class="radio-inline") 
      | Arts 
      input(type='checkbox', id='round', name='interest_filter', value='7', checked=interest=='arts') 

と私はどのようにこれが（私は滝を使用する考え得るために、私app.jsにあるデータ

$('#matchme').click(function(){ 
var data = {}; 

$.ajax({ 
     url: '/carousel', 
     type: 'POST', 
     cache: false, 
     data: JSON.stringify(data), 
     success: function(data){ 
      alert('post success') 
      console.log(JSON.stringify(data)); 
     } 
     }); 
}); 

を与えるには考えているところですデータをデータベースに保存してください）

app.post('/carousel', function (req, res) { 
var data = { 
interests: req.body.interest_filter, 
orientation: req.body.orientation_filter, 
age: req.body.age 
}, 
}); 

私はカルーセルにフォームを置くことができないため、入力を使用しています。 これまでのところ私はコンセプトを理解していますが、今は1ヶ月間Javascriptを使用していましたが、私は立ち往生しています。 ありがとうございます！

Answer 1

感謝。これはこれで、これまで取り組んでき として：

$(document).ready(function() { 
console.log("document is ready"); 
$("#matchme").click(function(){ 
event.preventDefault(); 
var data = {}; 
data.sex = $('[name=sex]:checked').val(); 
data.orientation_filter = $('[name=orientation_filter]:checked').val(); 
data.age = $('[name=age]:checked').val(); 

console.log(data.sex); 
console.log(data.orientation); 
console.log(data.age); 
$.ajax({ 
     url: '/carousel', 
     type: 'POST', 
     cache: false, 
     data: JSON.stringify(data), 
     success: function(data){ 
      alert("post success") 
      console.log(JSON.stringify(data)); 
      } 
     }); 
    }); 

}); 

だから私はそれをログインしたときに、私はdata.sexの値を取得することができますが、他の2つdata.orientationとdata.ageはまだ定義されていません。ここで

は私app.jsはこのポストのためのファイルです：

app.post('/carousel', function (req, res) { 
username = session.uniqueID; 
var data = { 
sex: req.body.sex, 
orientation: req.body.orientation_filter, 
age: req.body.age 
}; 
console.log(data.sex); 
console.log(data.age); 
function UserStart(data, callback) { 
async.waterfall([ 
    function(cb) { 
    pool.getConnection(function (err, connection) { 
     if (err) { 
     console.log(err); 
     } 
     connection.query('INSERT INTO usersinfo SET ?', data , function (err, rows, fields) { 
     if (err) { 
      console.log(err, "error") 
     } else { 
      callback(null, "all good") 
     } 
     }); 
    }); 
    } 
], 
function (err, data) { 
    if (err) { 
    callback(err); 
    } else { 
    callback(null, data); 
    } 
}) 
} 
UserStart(data, function (err, callback) { 
if (err) { 
    res.redirect('/login'); 
    console.log("login again"); 
} else { 
    res.redirect('/home'); 
    console.log("user is now activated, ready !"); 
} 
}) 
}); 

Answer 2

まず、ユーザーからすべての情報を収集し、そのオブジェクトをAjaxコールで渡す必要があります。空白のオブジェクトを除いてリクエスト中に渡すデータは表示されません。サーバー側でその後あなたはすでに書かれているとして、あなたがreq.bodyですべての情報を得ることができます。..

 $('#matchme').click(function(){ 
     var data = {name:'hola', info: 'info'}; 

     $.ajax({ 
     url: '/carousel', 
     type: 'POST', 
     cache: false, 
     data: JSON.stringify(data), 
     success: function(data){ 
      alert('post success') 
      console.log(JSON.stringify(data)); 
     } 
     }); 
    }); 

Answer 3

まず第一に、私は「ラウンド」のスタイルを適用する代わりに、IDのclass属性を使用することをお勧めしますそれぞれの要素、私は正しく質問を理解している場合。

これを変更すると、バニラのJavaScript：document.getElementById('someId').value構文を使用して異なる値を抽出できますか？

あなたはjQueryのライブラリを使用している場合は、それも簡単です：あなたはあなたの助けのために、私は今のコンセプトを得る$("#someId").val(); http://api.jquery.com/val/