form で GET する時に、ページ再読み込みさせないようにしたい。

Question

下記のformでfilterを選んでApplyボタンを押すと、その結果が表示される流れです。
結果が表示される際に、ページの再読み込みされてしまいます。
ページの再読み込みがされずに、<div>の表示結果だけ変わるようにしたいです。

非同期処理をすれば、良いと言うところまでわかったのですが、
Backend側でどのような処理をしてMongodbのデータを渡し、フロントエンド側でどのように受け取れば
ページ再読み込みがされないのでしょうか？

アドバイスいただけると幸いです。

＜フロントエンド＞

<form action="/" method="GET">
  <!-- Review -->
  <div class="form-group">
    <input id="star1" type="radio" name="review_min" value="5" />
    <label for="star1">★</label>
  </div>

  <button type="submit" class="btn btn-success btn-filter mt-5">
    Apply
  </button>
</form>

<div>
  フィルターした結果を表示
</div>

＜バックエンド＞

router.get("/", (req, res) => {
  let query = {};
  let review_min = req.query.review_min;

  query = { review: { $gte: review_min } };

  Place.find(query, (err, places) => {
    res.render("index", { places, query });
  });
});

Answer 1

getしたときに表示が変わらないと何度も再送信が繰り返される可能性があるので注意

方法としてはフロントでajax(xhr)もしくはfetchで処理してください

Comments

[Yama-guchi]

ありがとうございます。
フロント側（Javascript）で fetch しました。バックエンド側では、Jsonを吐き出す用のAPI（？）を作成しました。
```
router.post("/fetchplace", upload.single("file"), (req, res) => {
let query = {};

// Create query
if (Object.keys(req.body).length) {
if (Object.keys(req.body).indexOf("review_min") != -1) {
let review_min = req.body.review_min;
query.review = { $gte: review_min };
}

if (Object.keys(req.body).indexOf("ingredients") != -1) {
let ingredients = req.body.ingredients;
query.ingredients = { $in: [ingredients] };
}

if (Object.keys(req.body).indexOf("price") != -1) {
let price = req.body.price;
query.price = price;
}

// console.log(query);
}

Place.find(query, (err, places) => {
// console.log(places);
res.send(places);
});
});
```