为什么 angularjs 中 $http.post 的成功或错误回调函数无法正确执行

Question

我正在尝试使用以下代码与服务器通信。

$scope.Save = function () {
        $scope.loading = true;

        if ($scope.roleSetupModel.RoleID === "") {
            // Save
            //$scope.loading = true;
            $http.post('/SecurityModule/RoleSetup/AddRole', JSON.stringify($scope.roleSetupModel))
                .success(function (response) {
                    $scope.loading = false;
                    $('#addModal').modal('hide');
                    $scope.BindDataToGrid();
                    alert("Success");
                    toastr.success(response.Message);

                })
                .error(function (response) {
                    $scope.loading = false;
                    alert("Fail");
                    toastr.error(response.Message);

                });

        }
        else {
            $http.post('/SecurityModule/RoleSetup/EditRole',
                    JSON.stringify(convArrToObj($scope.roleSetupModel)))
                .success(function (response) {
                    $('#addModal').modal('hide');
                    $scope.loading = false;
                    toastr.success(response.Message);
                    $scope.BindDataToGrid();
                })
                .error(function (data) {
                    $scope.loading = false;
                    toastr.error(response.Message);
                });

        }
    }

但我得到了有线行为。该链接每次都被点击，我在那里放置了一个调试器，但即使在完成请求之前，我的页面也会刷新，使我的模型为空，而无需输入成功或错误回调。我对 promise 对象了解一些，但没有意义。我在这里做错了什么？

Answer 1

我的猜测是你没有将$scope.Save() 绑定到<form> 的ng-submit 并且它是由提交按钮触发的，或者你没有遵循表单文档

如果表单设置为：

<form name="formScopeName" ng-submit="Save()" novalidate>

您的$http 应该可以正常工作。但是，如果您在表单上设置了action，则角度解释为您想在没有 ajax 的情况下提交并使用默认浏览器进程。所以请确保action 属性不存在。

还请注意，没有理由自己对数据进行字符串化。这将由$http 在内部自动完成。这可能会导致错误

您也可以传入$event 以获得额外的保护，然后使用preventDefault。但是，通常这不是必需的。

ng-submit="Save($event)"

JS

$scope.Save = function (event){
    event.preventDefult();
     .....