我正在使用 Spring MVC 和 AngularJS 构建单页应用程序。我有一个 header-footer-sidebar 和一个 ng-view 部分,其中所有页面都由 Ajax 使用 routeProvider 加载。 问题是 routeProvider 仅处理 GET 请求,这意味着我无法传递任何参数。 (我不想传递 url 中的所有表单数据) 我想使用 Ajax POST 请求 提交表单,同时更改 ng-view 内容。这可能使用 Angular routeProvider 吗?
到目前为止,我想到的解决方案是发布表单数据,接收成功消息,然后更改 url 的哈希值,以触发对服务器的新页面请求。不过,此解决方案的缺点是对服务器执行 2 个请求,而我只想执行一个请求。
谢谢
最佳答案
首先,您必须意识到 routeProvider 用于更改应用程序内部的路由,而不是将数据传递到服务器。使用服务或工厂将数据传递到服务器,并从那里返回您的响应页面。 这是一个简单的例子,
形式:-
<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");
});
}
}
});
Controller :-
myApp.controller('controller1',['$scope','$http','$rootScope','factoryname',function($scope,$http,$rootScope,factoryname){
$scope.insertEmp = function(){
$scope.formFactory = factoryname.insertData($scope,$http);
};
}]);
Spring Controller :-
@RequestMapping(value="/aurlPattern",method = RequestMethod.POST)
public String insertmethod(@RequestBody FormModelObject FormModelObject) {
//do something
return "responsePage";
}
关于javascript - 在 AngularJs 单页应用程序中发布请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23423284/