How to go from an JS onclick event to Servlet for saving/retrieving data?

Question

I am trying to create simple application for practice using JSP, Servlets and some JS.

When use marks a post as important by clicking on an icon, I want to save that corresponding USER_ID & POST_ID into database table USER_POST_ACTIVITY so that we we load the app next time, we should be able to load the marked posts if sorted by importance.

I am have come up with some front-end but am stuck with how to connect the mark(click) on post to insert DB query.

How can I call my java JDBC code when clicking on star - it is not a form, so is it possible through the event? And also render elements when select sort by starred?

function onSetImp(e) {
  e.target.src = e.target.src == "https://img.icons8.com/color/48/000000/star.png" ? "https://img.icons8.com/emoji/48/000000/star-emoji.png" :
    "https://img.icons8.com/color/48/000000/star.png";
}

.section {
  background-color: black;
  width: 100px;
}

.mark-post {
  margin-left: 30px;
}

.mark-post:hover {
  cursor: pointer;
}

.sort {
  margin-top: 20px;
}

<div class="section">
  <img class="mark-post" style="height: 30px; width: 30px;" onclick="onSetImp(event)" src="https://img.icons8.com/color/48/000000/star.png" />
</div>

<div class="sort">
  <label for="sorting">Sort By:</label>
  <select id="sorting" name="sort">
    <option value="latest">Starred</option>
    <option value="oldest">Oldest</option>
    <option value="starred">Latest</option>
  </select>
</div>

Answer 1

You can call your servlets from js using XMLHttpRequest. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send