javascript - 使用 AngularJS/AJAX 提交表单

Question

所以通常情况下，我会使用 AJAX 提交我的表单，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。

感谢任何帮助

Answer 1

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

语法

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

示例

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

现在，您可以在您的 Controller 中定义提交函数，它调用一个服务(Ajax)来提交表单数据。

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

Reference