Обновление модальных значений при нажатии кнопки без перезагрузки

В настоящее время я пытаюсь изучить node.js с экспрессом и начальной загрузкой. Я пытаюсь обновить значения внутри тегов «pre» после нажатия кнопки «Создать». Я предполагаю, что это можно сделать через AJAX, но у меня проблема с тем, как правильно это реализовать.

В настоящее время API_Key и API_Secret извлекаются из содержимого «req» после входа в систему. Затем у пользователя есть ссылка на панель навигации, чтобы открыть модальное окно, чтобы получить ключи API или создать новый.

[Модальный][1]

Вот коды, которые у меня есть до сих пор.

//Route js  
router.get('/api/generate', ensureAuthenticated, (req, res) => {
    db.Account.findOne({ where: {email: req.user.email} })
    .then(Account => { 
        Account.update({
            API_Key: uuidv4(),
            API_Secret: uuidv4()
        });
        req.flash('success_msg', 'New API Keys successfully generated.');
    });
});

//.ejs modal
<div class = "modal fade" id = "APIModal">
                    <div class = "modal-dialog" role = "document">
                        <div class = "modal-content">
                            <div class = "modal-header">
                              <%= success_msg %>
                              <h5 class = "modal-title">API Token</h5>
                              <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                                <span aria-hidden = "true">&times;</span>
                              </button>
                            </div>
                            <div class = "modal-body">
                                <a>API Key</a>
                                <pre style = "display: flex; word-break: break-word; white-space: normal; background: #eeeeee" id = "preKey"><%= API_Key %></pre>
                                <a>API Secret</a>
                                <pre style = "display: flex; word-break: break-word; white-space: normal; background: #eeeeee" id = "preSecret"><%= API_Secret %></pre>
                                <div class = "alert alert-dismissible alert-warning">
                                    <h4 class = "alert-heading">Warning!</h4>
                                    <p class = "mb-0">Generating a new token will invalidate previous tokens.</p>
                                  </div>
                              </div>

                            <div class = "modal-footer">
                              <a href = "/api/generate" type='submit' class = "btn btn-primary" id='generateAPI'>Generate</a>
                              <!--<button href='/generate' type = "submit" class = "btn btn-primary" >Generate</button>-->
                              <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div><


  [1]: https://i.stack.imgur.com/xk64g.png