带有 POST 方法的 HTML 表单中的动态操作答案

【问题标题】：Dynamic action in HTML form with POST method带有 POST 方法的 HTML 表单中的动态操作
【发布时间】：2014-03-10 18:48:34
【问题描述】：

我的 webapp 必须将用户重定向到我无法控制的另一个网站。该网站希望从用户那里收到一些 POST 参数。

如果没有角度，我将不得不使用这样的表单重定向用户：

<FORM METHOD="POST" ACTION="https://otherwebsite.com/index.php"> 
  <INPUT TYPE="HIDDEN" NAME="id" VALUE="A1S2D3"> 
  <INPUT TYPE="hidden" NAME="number" VALUE="1234567"> 
  <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="Submit"> 
</FORM>

在 Angular 中，这也可以，但我希望操作 url 和“数字”的值来自 Angular 的范围。

遗憾的是，当我在 value/action 属性中使用 ng-model 或 {{var}} 时，它似乎不起作用。

有什么想法可以将用户重定向到使用范围内的 POST 参数的其他网站？

【问题讨论】：

在不使用 JavaScript 的情况下，帖子是否已经正常工作？
如果我在 html 页面中手动设置操作和输入值，它可以工作。我想在具有动态值的 angularjs 应用程序中获得类似的结果。我不确定角度是否可行，但必须有一种肮脏的方式（例如，将 JS 中的表单注入 DOM 并提交）...
how to use javascript change the form action 的可能重复项
正如你所说，我认为仅使用 Angular 是不可能的，但纯 JS 可能是可行的。
尼古拉斯，我认为这个其他问题是一种有效的方法，但它不是重复的，因为可能有一种方法可以在没有纯 js hack 的情况下以角度来做。

标签： angularjs

【解决方案1】：

在这里，我找到了一种简单的使用方法，它（有点使用）Angular。

我有一个角度函数

$scope.setAction= function(){
    document.myForm.action='http://anothersite.com';
};

myForm 是表单的名称属性。

<form action="http://asamplesite.com" method="POST" name="myForm">

看我的小提琴。 http://jsfiddle.net/nicolasmoise/f6R9x/

注意这有点违背“Angular Way”，因为在您看来，您无法看到该逻辑，它有点隐藏在控制器内部。但是，正如我在链接到的问题中所述，Angular 不喜欢以旧方式提交表单。另一种方法是让表单通过ng-submit 调用一个函数，该函数获取您的动态网址并进行重定向/重新加载（可能使用$location）。这种方式可能会更长，但至少你的逻辑会在你看来更明显。

【讨论】：

【解决方案2】：

使用ngSubmit 的指令，它允许您调用方法来提交表单。根据文档，如果表单包含 action、data-action 或 x-action 属性，那么它将执行默认的表单操作。对于表单，这意味着将请求发送到服务器并重新加载当前页面。

  <script>
    function Ctrl($scope) {
      $scope.number = "1234567";
      $scope.id = "A1S2D3";
    }
  </script>

  <form ng-submit ng-controller="Ctrl" data-action="https://otherwebsite.com/index.php">
    <INPUT TYPE="HIDDEN" NAME="id" ng-model="id">
    <INPUT TYPE="hidden" NAME="number" ng-model="number">
    <input type="submit" id="submit" value="Submit" />
  </form>

【讨论】：

这不起作用。使用 ng-model 绑定的输入在 post 请求中没有值，并且操作不可绑定。
是的，这很有趣，我正在测试它并遇到the following error。

【解决方案3】：

我在隐藏输入方面遇到了同样的问题（似乎 Angular 忽略了它们）。

我使用了这个解决方案：

<INPUT TYPE="text" NAME="number" ng-model="myNumber" hidden>

【讨论】：