javascript - 为什么在 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

我猜你没有绑定(bind) $scope.Save()至 ng-submit的 <form>并通过提交按钮触发它，或者您没有遵循表单文档

如果表单设置为:

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

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

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

也可以传入$event额外的保护，然后 preventDefault。然而，通常这不是必需的。

ng-submit="Save($event)"

JS

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