The article presents code samples that one could use to quickly get started with posting JSON data using AngularJS $http service while working with SpringMVC web application. The demo for the code below could be found on this page, http://hello-angularjs.appspot.com/angularjs-http-service-ajax-post-json-data-code-example. Earlier, I posted this article where one could post the html data (text/html) using AJAX & SpringMVC.
Following are key steps:
Following are key steps:
@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(); }
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; } }
Following code could be used to post JSON data to the server. Following assumes that you shall be creating the ng-app with name as “helloAjaxApp”.
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=''; }; }]);
Following is the view code that represents the call to the method, addRowAsyncAsJSON, to post the JSON data:
<form class="form-horizontal" role="form" ng-submit="addRowAsyncAsJSON()"> <div class="form-group"> <label class="col-md-2 control-label">Name</label> <div class="col-md-4"> <input type="text" class="form-control" name="name" ng-model="name" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Employees</label> <div class="col-md-4"> <input type="text" class="form-control" name="employees" ng-model="employees" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Headoffice</label> <div class="col-md-4"> <input type="text" class="form-control" name="headoffice" ng-model="headoffice" /> </div> </div> <div class="form-group"> <div style="padding-left:110px"> <input type="submit" value="Submit" class="btn btn-primary"/> </div> </div> </form>
Last updated: 28th April, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 28th April, 2024 In this post, you will learn the concepts related to…
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…
Last updated: 22nd April, 2024 As data scientists, we navigate a sea of metrics to…
Last updated: 22nd April, 2024 This post will teach you about the gradient descent algorithm…
Last updated: 19th April, 2024 Among the terminologies used in training machine learning models, the…
View Comments
Great post sir, But Can you please tell what is the use of push $scope.companies.push()