Question

我需要一些帮助。我试图通过互联网上发现的不同事情来完成这项工作，但我无法理解这一过程。我有一个旋转木马，我的用户在注册后重定向到了。我想通过简单的问题作为输入来获取有关他们个人资料的信息。这是Pug代码

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')

这是我不知道如何提供数据的地方

$('#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.js中（我将使用瀑布来考虑数据并将其存储在我的数据库中）

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

我使用输入法，因为您无法在旋转木马中放置表单。到目前为止，我理解这个概念，但我现在已经使用Javascript一个月而且我被卡住了，请帮忙吗？提前谢谢！

Answer 1

首先，您必须从用户收集所有信息并在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 2

首先，如果我正确理解问题，我建议使用class属性而不是id将“round”样式应用于每个元素。

如果你改变了，你可以使用vanilla JavaScript：document.getElementById('someId').value语法来提取不同的值吗？

如果您使用的是JQuery库，则更容易：$( "#someId" ).val(); http://api.jquery.com/val/

Answer 3

感谢您的帮助，我现在得到了这个概念。它到目前为止一直在努力：

$(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的值，但另外两个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 !");
 }
})
});

使用Ajax，jquery，Node.js和Express

3 个答案: