Javascript AngularJs$http post SUCCESS回调导致页面重定向，即使服务器以200状态响应

我用agularjs编写了一个简单的控制器，用于处理表单提交。使用ng submit提交表单

服务器正在成功处理post请求并返回http状态200。 但是AngularJs再次使用POST方法调用当前页面url，这导致服务器返回MethodNotAllowedException（Laravel 5.2）页面

这是控制器代码

app.controller('adminAddController', ['$scope', '$http', 'Page', function($scope, $http, Page){
    $scope.formData = {};
    $scope.processForm = function($event) {

        console.log($scope.formData);
        $http({
            method  : "post",
            url     : 'http://localhost:8000/api/blogs',
            data    : $scope.formData,  
        })
        .then(function successCallback(response) {
            console.log(response);
        }, function errorCallback(response) {
            console.log(response);
        });
    };
}]);

---

通常会发生这种情况，因为您没有阻止表单的默认操作，所以在发送Ajax调用后，表单会正常提交，然后浏览器会被重定向，或者根据表单提交重新加载页面

如果您添加：

$event.preventDefault();

对你的处理者来说，这应该会处理好的

app.controller('adminAddController', ['$scope', '$http', 'Page', function($scope, $http, Page){
    $scope.formData = {};
    $scope.processForm = function($event) {

        // prevent default form submission
        $event.preventDefault();

        console.log($scope.formData);
        $http({
            method  : "post",
            url     : 'http://localhost:8000/api/blogs',
            data    : $scope.formData,  
        })
        .then(function successCallback(response) {
            console.log(response);
        }, function errorCallback(response) {
            console.log(response);
        });
    };
}]);

---

此外，如果您的

元素没有

action

属性，则angular将自动阻止表单提交。您没有显示相关的表单HTML，因此我们不知道这是否适用于您的情况。

通常会发生这种情况，因为您没有阻止表单的默认操作，因此在发送Ajax调用后，表单会进行正常提交，然后浏览器会根据表单提交重定向或重新加载页面

如果您添加：

$event.preventDefault();

对你的处理者来说，这应该会处理好的

app.controller('adminAddController', ['$scope', '$http', 'Page', function($scope, $http, Page){
    $scope.formData = {};
    $scope.processForm = function($event) {

        // prevent default form submission
        $event.preventDefault();

        console.log($scope.formData);
        $http({
            method  : "post",
            url     : 'http://localhost:8000/api/blogs',
            data    : $scope.formData,  
        })
        .then(function successCallback(response) {
            console.log(response);
        }, function errorCallback(response) {
            console.log(response);
        });
    };
}]);

---

此外，如果您的

元素没有

action

属性，则angular将自动阻止表单提交。您没有显示相关表单HTML，因此我们不知道这是否适用于您的情况。

尝试这样更改：

app.controller('adminAddController', ['$scope', '$http', 'Page', function($scope, $http, Page){
        $scope.formData = {};
        $scope.processForm = function($event) {

            console.log($scope.formData);
            $http.post('api/blogs', {data:$scope.formData})
            .then(function successCallback(response) {
                console.log(response);
            }, function errorCallback(response) {
                console.log(response);
            });
        };
    }]);

---

谢谢和干杯试着像这样改变一下：

app.controller('adminAddController', ['$scope', '$http', 'Page', function($scope, $http, Page){
        $scope.formData = {};
        $scope.processForm = function($event) {

            console.log($scope.formData);
            $http.post('api/blogs', {data:$scope.formData})
            .then(function successCallback(response) {
                console.log(response);
            }, function errorCallback(response) {
                console.log(response);
            });
        };
    }]);

---

谢谢和干杯

所以这个问题似乎并不像看上去那么难解决

---

我从表单元素中删除了action=“”属性，它开始按预期工作。

因此，问题似乎不像看上去那么难解决

---

我从我的表单元素中删除了action=”“属性，它开始按预期工作。

能否显示表单元素？请粘贴表单的代码。能否显示表单元素？请粘贴表单的代码。为什么这样可以解决问题？好的答案通常应该包含一些关于更改内容和更改原因的解释，而不仅仅是代码。为什么这样可以解决问题？好的答案通常应该包含一些关于更改内容和原因的解释，而不仅仅是代码。