使用 AngularJS/AJAX 提交表单答案

【问题标题】：Form submission using AngularJS/AJAX使用 AngularJS/AJAX 提交表单
【发布时间】：2015-12-04 11:35:22
【问题描述】：

所以通常情况下，我会使用 AJAX 提交我的表单，它会捕获表单数据，将其传递给我的 PHP，然后使用下面的代码从我的 php 接收任何响应；

<script>
    $("input#submit").click(function() {
        $("#login-form").submit(function(e) {
            $('#loader').show();
            // Client side validation
            if ($("#email").val() == "" || $("#password").val() == "") {
                $('#loader').hide();
                fieldError();
            }
            else {

                var postData = $(this).serializeArray();
                var formURL = $(this).attr("action");

                $.ajax(
                    {
                        url : formURL,
                        type: "POST",
                        data : postData,
                        success:function(response) 
                        {
                            switch(response) {
                                case "Valid":
                                    $('#loader').hide();
                                    $('#login-form').trigger("reset");
                                    window.location.href="index.php";
                                    break;
                                case "not eValid":
                                    $('#loader').hide();
                                    emailError();
                                    break;
                                case "not aValid":
                                    $('#loader').hide();
                                    window.location.href="cverify.php";
                                    break;
                                case "not Valid":
                                    $('#loader').hide();
                                    credError();
                                    break;
                            }
                        }
                    });
            }
            e.preventDefault(); //STOP default action
            e.unbind();
        });
    });
</script>

我现在有一个使用 Angular 的表单，我想以与上述相同的方式提交，但似乎无法正常工作。在这个表单中，我使用button 作为提交。

<button type="submit" 
        id="submit"
        class="btn btn-fluid-full btn-primary btn-large" 
        ng-disabled="!blockCheckout()">
    Checkout
</button>

使用上面的表单提交代码将 input#submit 替换为 button#submit 不起作用，我只是导航到表单的操作 URL。

任何帮助表示赞赏

【问题讨论】：

你能解决你的问题吗？您是否在表单上进行了任何验证？
stackoverflow.com/questions/29440964/…希望这有帮助
那是一些复杂的东西 :( @AbhijeetKumarGaur
@JayPatel 没有验证。这是一个简单的形式。

标签： javascript php jquery angularjs ajax

【解决方案1】：

您可以在表单标签上使用ng-submit 指令。

语法

<form
  ng-submit="expression/function">
...
</form>

示例

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

现在，您可以在控制器中定义提交函数，该函数调用服务（Ajax）来提交表单数据。

要停止重定向，请从按钮标记中删除 type="submit" 属性。

Reference

【讨论】：