如何使用操作属性发送 html 表单数据而不重定向到另一个页面

How do you send html form data using the action attribute without redirecting to another page?

本文关键字：重定向 另一个 数据 表单 操作 何使用 属性 html      更新时间：2023-09-26

我正在使用Angular和Plaid。 我想提交以下表单，该表单使用 html 表单中的"action"属性将public_token发布到/authenticate。如何在不重定向到其他页面的情况下将public_token发布到我的服务器（/authenticate）。

第 2 步：简单集成

在您的网站或 Web 应用程序中包含以下标记（和标记）：

-- 名为 public_token 的隐藏输入将附加到此表单用户完成链接流后。然后链接将提交表单，将public_token发送到您的服务器。--

<form id="some-id" method="POST" action="/authenticate"></form>
<script
  src="https://cdn.plaid.com/link/stable/link-initialize.js"
  data-client-name="Client Name"
  data-form-id="some-id"
  data-key="test_key"
  data-product="auth"
  data-env="tartan">
</script>

可以在此处找到有关此说明的说明：https://plaid.com/docs/link/#step-1-get-your-public_key

没有提供有关如何从客户端的窗体获取public_token的指导，尽管它明确指出在客户端公开它是安全的。

您必须阻止表单的默认操作：有几种方法可以做到这一点，这里有两种jQuery和Vanilla JS：

jQuery 

$('#form').submit(function (event) {
    event.preventDefault();
    window.history.back();
});

.JS

if (element.addEventListener) {
    element.addEventListener("submit", function(event) {
        event.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(event){
        event.preventDefault();
        window.history.back();
    });
}

角您可以将 $event 对象传递给您的方法，并对其调用 $event.preventDefault（），这样就不会发生默认事件：

<a href="#" ng-click="do($event)">Click</a>
// then in your controller.do($event) method
$event.preventDefault()

像这样编写一个指令，然后注入你的 angular 应用程序。

yourApp.directive('preventDefault', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            element.on('click', function(e){
                    e.preventDefault();
                });
        }
   };
});

然后在表单中添加指令"prevent-default"或任何您想要停止默认行为的 html 标签，如下所示 

<form id="some-id" method="POST" action="/authenticate" prevent-default></form>
相关文章：