10

我正在一个现有的 Web 应用程序上实现 AngularJS，它需要一个通用的 HTTP POST，就像没有 AngularJS 一样。

这似乎比我预期的要困难。页面 URL 是动态生成的，无法使用 PHP 回显。我尝试使用 jQuery 修改表单操作，但这似乎也不起作用。

真的不能以正常方式提交表单吗？这就是我对正常形式的意思：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <form method="post">
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>

这与 AngularJS 的形式相同：

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post">
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>

第一个表单执行常规表单发布，第二个表单不执行。根据http://docs.angularjs.org/api/ng.directive:form这是设计使然，我可以在表单中提供“action”参数。将其留空不起作用，并且使用 jQuery 对其进行修改似乎也不起作用。

4

5 回答 5

13

我遇到了同样的问题。只要 AngularJS 找到一个空的（或缺失的）action属性，它就会阻止任何提交按钮/输入实际提交表单。

我设法解决了这个问题，只需添加action="#"属性。

#这只是一种解决方法，在 POST URL 的末尾会有那个丑陋的，但可以。优点是您不需要在 HTML 代码中对 POST URL（可以动态生成）进行硬编码。

于 2013-09-30T17:23:52.853 回答
3

我通常这样做：

<form action=".">
于 2014-01-25T03:30:41.620 回答
2

我找到了。。有点。事实证明，在加载 DOM 树时使用 jQuery 修改动作确实有效，但在加载 DOM 后修改它不起作用..

所以这确实有效：

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post" ng-submit="submit()" action>
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>
<script type="text/javascript">
    $("form").get(0).setAttribute( "action", "test.html" );
</script>

但这不会：

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post" ng-submit="submit()" action>
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>
<script type="text/javascript">
    $(function() {
        $("form").get(0).setAttribute( "action", "test.html" );
    });
</script>

感觉就像一个可怕的黑客，但我想我必须忍受它。除非有人能想出更好的解决方案..

于 2013-08-08T11:31:34.883 回答
2

您可以尝试添加一个空的操作属性，例如

<form action="" method="POST">

根据HTML 表单提交算法，第 8 点是

如果 action 是空字符串，让 action 是表单文档的文档地址。

这意味着它应该采用动态构造的 url 并发布到它，AngularJS 也将允许它，因为有一个 action 属性

于 2013-08-08T10:34:57.027 回答
-4

你不能只用

<form ng-submit="submit()" ng-controller="Ctrl">

并将POST方法添加到控制器

于 2013-08-08T10:05:06.010 回答