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.employees}} {{company.headoffice}}


  • 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':$, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
		// Writing it to the server
		var dataObj = {
				name : $,
				employees : $scope.employees,
				headoffice : $scope.headoffice
		var res = $'/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

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) { = 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