Question

我在现有的Web应用程序上实现AngularJS，这需要像没有AngularJS那样的常见HTTP POST。

这似乎比我预期的要困难。页面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>

第一个表单执行常规表单发布，第二个表单不执行。根据{{3}}，这是设计的，我可以在表单中提供“action”参数。将它留空是行不通的，并且使用jQuery修改它似乎也不起作用。

Answer 1

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

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

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

Answer 2

我通常会这样做：

<form action=".">

Answer 3

我发现它..有点。事实证明，在加载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>

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

Answer 4

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

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

根据HTML Form Submission Algorithm，第8点是

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

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

Answer 5

你不能只使用

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

将POST方法添加到控制器

AngularJS：以正常方式提交表格

5 个答案: