Question

我目前正在尝试通过express和bootstrap学习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

Answer 1

现在一切都很好。弄清楚了如何使用AJAX更新它。

谢谢！

$("#generateAPI").on('click',function(event){
    event.preventDefault();
    event.stopPropagation();
    var uid = $(".uid").val();
    var confirmation = confirm('Are you sure you want to generate new set of keys?');
    if(!confirmation){
        return false;
    }
    $.ajax({
        url: "/api/generate",
        method: "POST",
        data: {uid: uid},
        dataType: "json"
    }).done(function(data){
        var key = JSON.parse(JSON.stringify(data));
        changeKeysDisplay(key.API_Key, key.API_Secret);
    })
    .fail(function(err) {
        console.log(err);
    })
    })

单击按钮时更新模态值，无需重新加载

1 个答案: