使用AngularJS / AJAX提交表单

Question

因此，通常，我将使用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的表单，我想以与上述bu相同的方式提交，bu似乎没有用。 在这种形式下，我使用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()">

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

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

参考