发送 POST 但不导航的链接或按钮答案

【问题标题】：Link or button that sends a POST but does not navigate发送 POST 但不导航的链接或按钮
【发布时间】：2018-01-11 05:27:44
【问题描述】：

我需要一个锚标记或按钮，它可以将 POST 发送到 URL，但不会导航到任何地方。

这可能不符合当前标准，但可以在 Chrome 中使用。

<!DOCTYPE html>
<iframe style="display:none;" name="some"></iframe>
<form method="POST" target="some">
<button class="btn" style="margin:0px 10px 15px 0px;" type="submit"
    formaction="http://www.example.org:1234/test?P1=X">Test</button>
</form>

【问题讨论】：

你需要使用Ajax。
在表单中添加方法。示例<form id="myForm" method="POST">

标签： html button hyperlink target

【解决方案1】：

为了在不导航到另一个页面或刷新同一页面的情况下发布数据，您需要使用 Ajax。

根据您的代码，我假设您使用的是 jQuery。在 jQuery 中，有一些函数可以轻松实现 Ajax。

我将在下面添加一个示例代码供您参考。

$("#myLink").click(function(event) {
    event.preventDefault();
    var url = "http://example.com"; //The url/uri where you want to post the data to
    var data = {field1: "data1", field2: "data2"}; //Your data
    $.post(url, data, function(data, status) {
        //Data and status from server after posting your data
        console.log(data);
        console.log(status);
    });
});

您的a 标签将保持不变。

<a href="#" id="myLink">Send</a>

【讨论】：

谢谢。那么调用这个函数的标签会是什么样子呢？
@RichardU 我已经用<a> 标签更新了答案。
谢谢，维韦克。不幸的是，这不起作用，我不知道如何调试它。另外，我真的需要将 url 和参数发送给函数，因为我将有多个实例。我的主题中有一个 JavaScript 代码的位置，我已经在那里输入了函数。也许那是错误的。
打开浏览器控制台看看有没有报错？单击发送按钮时，还要检查开发人员工具中的网络选项卡是否有任何活动。
花了一上午的时间后，我意识到我遇到了混合内容错误。我需要访问的 URL 不是 HTTPS，我无法更改它。常规链接有效，但它会将我带到仅显示完成的页面。我只是想复制它而不实际进入新页面。想法？