在AngularJs单页面应用程序中发布请求 [英] Post request in an AngularJs single page application
问题描述
我正在Spring MVC和AngularJS中构建单页面应用程序。我有一个页眉 - 页脚 - 侧边栏和一个ng-view部分,其中所有页面都由Ajax使用routeProvider加载。
问题是routeProvider 仅用于GET请求,这意味着我无法传递任何参数。 (我不想传递网址中的所有表单数据)
我想使用 Ajax POST请求提交表单并同时更改ng-view内容。这是否可以使用Angular routeProvider?
I am building a single page application in Spring MVC and AngularJS. I have a header-footer-sidebar and an ng-view section where all the pages are loaded by Ajax with a routeProvider. The thing is that the routeProvider is only working with GET requests which means I cannot pass any parameters. (I don't want to pass all the form data in the url) I want to submit a form using Ajax POST request and in the same time change the ng-view content. Is this possible using Angular routeProvider?
我到目前为止所考虑的解决方案是发布表单数据,接收成功消息,然后按顺序更改URL的哈希值为新页面触发向服务器的新请求。但是,这个解决方案有一个缺点,就是我只想执行一个请求,对服务器执行2个请求。
The solution I have thought so far is to post the form data, receive a success message and then change the hash of the url in order to trigger a new request to the server for the new page. This solution though, has the drawback of performing 2 requests to the server while I want to perform only one.
谢谢
推荐答案
首先,您必须意识到routeProviders可以在您的应用程序内部更改路由,而不是将数据传递给服务器。使用服务或工厂将数据传递到服务器,并从那里返回您的响应页面。
这是一个简单的例子,
First of all you have to realize that routeProviders are there to change routes insider your application, not to pass data to server. use a service or a factory to pass data to the server, and return your response page from there. here is a simple example,
表格: -
<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";
}
这篇关于在AngularJs单页面应用程序中发布请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!