نمایش اطلاعات بدون reload صفحه‎ در nodejs

یه وبسایت مشابه ورزش 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>
پاسخ ها

sokanacademy forum
کاربر سکان آکادمی 5 سال پیش

این رو می شه با استفاده از سوکت ها انجام داد.

به راحتی می تونید با مراجعه به این وبسایت و مطالعه مستنداتش از نحوه عملکردش اشنا بشین.

برای بخش فرانت اند هم این سایت یک آموزش ارائه داده که عالیه.

online-support-icon