یه وبسایت مشابه ورزش 3 رو در نظر بگیرید
میخام بدونم چجوری میشه کاربر شماره هفته رو انتخاب کنه و بدون اینکه صفحه Reload بشه لیست مسابقات اون هفته رو بهش نمایش بده.
الان بعد انتخاب کاربر لیست مسابقات اون هفته رو تو comand prompt نمایش میده ولی نمیدونم چجوری تو همون صفحه نمایش بدم.
async ajax(req , res , next){
try {
res.json({...req.body});
let matchs = await Match.find({week : req.body.week}).exec();
console.log(matchs);
//return res.json(matchs);
//res.render('home/ajaxupload' , {matchs});
} catch (err) {
next(err);
}
}
router.get('/ajaxupload' , (req , res , next)=> res.render('home/ajaxupload'));
router.post('/ajaxupload', homeController.ajax);
<form id="myform" action="#" class="w-50">
<div class="form-group row">
<div class="col">
<label for="week" class="control-label font-weight-bold font-weight-bold">????</label>
<select name="week" id="week" class="form-control">
<option value=1 <%= old('week') === 1 ? 'selected' : '' %> > ???? ???</option>
<option value=2 <%= old('week') === 2 ? 'selected' : '' %> >???? ??? </option>
<option value=3 <%= old('week') === 3 ? 'selected' : '' %> >???? ??? </option>
</select>
</div>
</div>
<button type="submit" class="btn btn-danger">send</button>
</form>
<script>
document.getElementById('myform').addEventListener('submit' , function(event) {
event.preventDefault();
let week = document.querySelector('select[name="week"]')
let formData = new FormData();
formData.append('week' , week.value);
fetch('/ajaxupload' , {
method : 'POST',
body : JSON.stringify({
week : week.value
}),
headers : {
'Accept' : 'application/json',
'Content-Type' : 'application/json'
}
}).then(res => {
return res.json()
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
})
</script>
پاسخ ها