This example demonstrates the code that is used to post the JSON data to the server using AngularJS $http service based on AJAX POST protocol. It also demonstrates the capability of AngularJS dependency injection which is used to inject $http service to the controller as it is initiated.

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP. The detailed article on $http service could be found on AngularJS $http page.

Add a Company

Name Employees Head Office
{{company.name}} {{company.employees}} {{company.headoffice}}

Notes

  • Pay attention to Spring MVC controller method where @RequestBody is used. One needs to create a Domain object mapping to JSON. Also, just creating the domain object won't do. One needs to include Jackson libraries in the classpath. Otherwise, 415 error would keep haunting.

$http Service & Related Code

Pay attention to following:

  • Creation of JSON object

			
var helloAjaxApp = angular.module("helloAjaxApp", []);

helloAjaxApp.controller("CompaniesCtrl", ['$scope', '$http', function($scope, $http) {
	$scope.companies = [
	                    { 'name':'Infosys Technologies',
	                    	'employees': 125000,
	                    	'headoffice': 'Bangalore'},
	                    	{ 'name':'Cognizant Technologies',
		                    	'employees': 100000,
		                    	'headoffice': 'Bangalore'},
		                    	{ 'name':'Wipro',
			                    	'employees': 115000,
			                    	'headoffice': 'Bangalore'},
			                    	{ 'name':'Tata Consultancy Services (TCS)',
				                    	'employees': 150000,
				                    	'headoffice': 'Bangalore'},				                    	
	                    ];
	
	$scope.addRowAsyncAsJSON = function(){		
		$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
		// Writing it to the server
		//		
		var dataObj = {
				name : $scope.name,
				employees : $scope.employees,
				headoffice : $scope.headoffice
		};	
		var res = $http.post('/savecompany_json', dataObj);
		res.success(function(data, status, headers, config) {
			$scope.message = data;
		});
		res.error(function(data, status, headers, config) {
			alert( "failure message: " + JSON.stringify({data: data}));
		});		
		// Making the fields empty
		//
		$scope.name='';
		$scope.employees='';
		$scope.headoffice='';
	};
}]);
			
			

Java Controller Code

Pay attention to some of the following:

  • saveCompany_JSON method which is called from $http service using POST method type.
  • @RequestBody Company company that represents the fact that request is parsed using Jackson library and passed as Company object.

			
@RequestMapping(value = "/angularjs-http-service-ajax-post-json-data-code-example", method = RequestMethod.GET)
public ModelAndView httpServicePostJSONDataExample( ModelMap model ) {
	return new ModelAndView("httpservice_post_json");
}

@RequestMapping(value = "/savecompany_json", method = RequestMethod.POST)	
public  @ResponseBody String saveCompany_JSON( @RequestBody Company company )   {		
	//
	// Code processing the input parameters
	//	
	return "JSON: The company name: " + company.getName() + ", Employees count: " + company.getEmployees() + ", Headoffice: " + company.getHeadoffice();
}
			
			

Java Code for Company Object (Domain object)

			
package com.vitalflux.core;

public class Company {
	
	private String name;
	private long employees;
	private String headoffice;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Long getEmployees() {
		return employees;
	}
	public void setEmployees(Long employees) {
		this.employees = employees;
	}
	public String getHeadoffice() {
		return headoffice;
	}
	public void setHeadoffice(String headoffice) {
		this.headoffice = headoffice;
	}
}
			
			
comments powered by Disqus