[英]POST data using Ajax, jquery, Node.js and Express
我需要協助。 我試圖通過互聯網上發現的不同事情完成這項工作,但我無法理解這個過程。 我有一個旋轉木馬,我的用戶在注冊后重定向到了。 我想通過簡單的問題作為輸入來獲取關於他們的個人資料的信息。 這是帕格代碼
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一個月而且我被卡住了,請幫忙嗎? 提前致謝 !
首先,您必須從用戶收集所有信息並在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));
}
});
});
首先,如果我正確理解問題,我建議使用class屬性而不是id將“round”樣式應用於每個元素。
如果你改變了,你可以使用vanilla JavaScript: document.getElementById('someId').value
語法來提取不同的值?
如果您使用的是JQuery庫, $( "#someId" ).val();
容易: $( "#someId" ).val();
http://api.jquery.com/val/
謝謝你的幫助我現在得到了這個概念。 它到目前為止一直在用這個:
$(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 !");
}
})
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.