在AngularJs单页面应用程序中发布请求

时间:2014-05-02 07:48:42

标签: javascript ajax angularjs spring-mvc

我正在Spring MVC和AngularJS中构建单页面应用程序。我有一个页眉 - 页脚 - 侧边栏和一个ng-view部分,其中所有页面都由Ajax使用routeProvider加载。 问题是routeProvider 只能处理GET请求,这意味着我无法传递任何参数。 (我不想传递网址中的所有表单数据) 我想使用 Ajax POST请求提交表单,同时更改ng-view内容。这是否可以使用Angular routeProvider?

我到目前为止所考虑的解决方案是发布表单数据,接收成功消息,然后更改url的哈希值,以便为新页面触发对服务器的新请求。但是,这个解决方案的缺点是对服务器执行2个请求,而我只想执行一个请求。

谢谢

1 个答案:

答案 0 :(得分:2)

首先,您必须意识到routeProviders可以更改应用程序内部的路由,而不是将数据传递给服务器。使用服务或工厂将数据传递到服务器,并从那里返回您的响应页面。 这是一个简单的例子,

表格: -

<form name="empForm" ng-controller="insertEmpCtrl" ng-submit="insertEmp()">
name: <input type="text" class="form-control" name="lname" ng-model="formData.lname"/>
<input type="submit" value="Save" />

路由: -

myApp.config(function($routeProvider){
$routeProvider
    .when('/',{
        templateUrl : '/your/project/root.html',
        controller : 'controler1'
    })
    .when('/page',{
        templateUrl : '/your/project/page.html',
        controller : 'controler2'
    });
});

厂: -

myApp.factory('factoryname', function(){
return{
    insertData: function($scope,$http){
        var json_data = JSON.stringify($scope.formData);


        $http.post(url, json_data, {
            withCredentials: true,
            headers: {'Content-Type': 'application/json'},
            transformRequest: angular.identity
        }).success(function(){
            console.log("done");
        }).error(function(){
            console.log("error");
        });
    }
}
});

控制器: -

myApp.controller('controller1',['$scope','$http','$rootScope','factoryname',function($scope,$http,$rootScope,factoryname){

$scope.insertEmp = function(){

    $scope.formFactory = factoryname.insertData($scope,$http);

};
}]);

弹簧控制器: -

@RequestMapping(value="/aurlPattern",method = RequestMethod.POST)
public String insertmethod(@RequestBody  FormModelObject FormModelObject) {

    //do something


    return "responsePage";
}