javascript - 如何在按钮中隐藏 API 连接

Question

我有一段代码，我知道如何使用链接执行某些 API 调用，它看起来像这样

<a class="btn btn-default" href="https://testapi.internet.bs/Domain/Transfer/Initiate?ApiKey='.$user.'&Password='.$pass.'&Domain='.$domain.$ext.'" role="button">Restart Transfer</a>

这有效，但在页面上当然会显示 ApiKey=(actualKey) 以及用户和密码，这不是我想要的。我知道这就是它在链接中的工作原理，但是我如何使用按钮来做到这一点。

<form method="post" action="">
<button type="submit" class="btn btn-warning btn-lg btn-block" name="restartTransfer">Restart Transfer</button>
</form>

我猜测 PHP 操作例如(并不是说这是这样的，任何方式都可以使用 php、jquery 或 javascript)

if(isset($_POST['restartTransfer'])) {

}

现在我确实是这样做的

$(document).ready(function(){
    $("button[name = 'restartTransfer']").click(function(){
        window.location = "https://testapi.internet.bs/Domain/Transfer/Initiate?ApiKey=<?php print $user;?>&Password=<?php print $pass;?>&Domain=<?php print $domain;?>";

});
});

但这并没有隐藏它，这只是启动显示 API key 用户和密码的网络浏览器窗口。

如何在按钮推送中隐藏 API 信息(如果可能，在同一页面中)

这个想法是

1. 点击此按钮
2. 它加载 API 调用 URL(未显示)
3. 在名为 #message 的 Div 容器中返回一条消息“Complete”，作为示例

谢谢。

Answer 1

这可能会在浏览器地址栏中隐藏用户的实际 URL。但是，它不会保护凭据不被通过分析网络请求或查看网页源来查看。我建议使用 PHP 代理以使其更安全。

$("button[name='restartTransfer']").click(function() {

    $.ajax({
        url: "https://testapi.internet.bs/Domain/Transfer/Initiate?ApiKey=<?php print $user;?>&Password=<?php print $pass;?>&Domain=<?php print $domain;?>",
        type: 'GET',
        dataType: 'text/plain',
        success: function(data) {
            $('#message').text(data); // print results
        },
        error: function(xhr) {
            console.log('Error', xhr);
        }
    });

});