returning a live search. Get or Post?

Hello I am unsure how to send data back to the user without reloading the page. I only want to update a certain element value.I have this for my AJAX request.var genre = document.getElementById("genre"); genre.addEventListener("keyup", function(event){ showGenres(event.target.value); }); function showGenres(str){ if(str.length == 0){ document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.boarder="0px"; return; } var req = new XMLHttpRequest(); req.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ document.getElementById("livesearch").innerHTML = this.statusText; document.getElementById("livesearch").style.border = "1px solid #A5ACB2"; } } req.open("GET", "upload?q="+str, true); req.send(); } And this for my routesapp.get('/upload', function(req, res, next){ if(req.query.q){ console.log(req.query.q); db('genre') .where('name', 'like', '%'+req.query.q+'%') .then(function(search){ console.log(search); }) .catch(function(err){ console.log(err); }); } db('category') .then(function(categories){ console.log(categories); res.render('upload.html', { title: 'New Upload', messages: req.flash('alert'), user: req.session.user, accountImage: req.session.accountImage, isLogged: req.session.isLogged, categories: categories }); }) .catch(function(err){ console.log(err); }); }); do I need to make a separate route to handle the queries? Once the upload page is rendered I do not want it to be re-rendered. I want just one element, the "livesearch" to be the only thing that refreshed.Anyone help solving this would be greatly appreciated!Thank you.

Submitted December 23, 2016 at 09:05PM by clandest