CODEWITHSUNDEEP
javascriptangularjs
KVK
KVK

Reputation: 1289

$http.post() method not working in angular js

I am trying to insert data's into db using spring, angularjs and hibernet. in app.js file Controller method $http.post(urlBase + '/angular/insert/' +$scope.Name+'/'+$scope.City) was not working I don't know what is the mistake i have done.

AngularDate.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html ng-app="taskManagerApp">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>AngularJS Task Manager</title>
        <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
        <script src="<c:url value=" /resources/js/app.js "/>"></script>
    </head>

    <body>
        <div ng-controller="taskManagerController">
            <span>Add Task</span>
            <div>
                <div>
                    <table>
                        <tr>
                            <td> Name:</td>
                            <td>
                                <input type="text" ng-model="Name" />
                            </td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td>
                                <input type="text" ng-model="City" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button ng-click="addTask()" class="btn-panel-big">Add New Task</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </body>

</html>

app.js

var taskManagerModule = angular.module('taskManagerApp', []);
var t = angular.module('taskManagerController', []);

taskManagerModule.controller('taskManagerController', function ($scope, $http) {
    var urlBase = "http://localhost:8081/logistics";
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    //get all tasks and display initially
    //add a new task
    $scope.addTask = function addTask() {
        if ($scope.Name == "" || $scope.City == "") {
            alert("Insufficient Data! Please provide values for  name and city");
        }
        else {
            alert("else");
            $http.post(urlBase + '/angular/insert/' + $scope.Name + '/' + $scope.City).success(function (data) {
                 alert("Task added");
                 // $scope.tasks = data;
                 $scope.Name = "";
                 $scope.City = "";
                 //$scope.toggle='!toggle';    
             });
        }
    };

    // Archive Completed Tasks
});

//Angularjs Directive for confirm dialog box

Can anyone help me fix my issue?

Upvotes: 0

Views: 68

Answers (1)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

The $http post expects the POST body so if you have it then replace this 

$http.post(urlBase + '/angular/insert/' +$scope.Name+'/'+$scope.City)

with 

//JSON data to post
var postData = {
  ...
  ...
 }
$http.post(urlBase + '/angular/insert/' +$scope.Name+'/'+$scope.City, postData).success(
function(data) {
    //success code
 })

or if you do not have any post data then simply send an empty JSON object like 

 $http.post(urlBase + '/angular/insert/' +$scope.Name+'/'+$scope.City,{}).success(
    function(data) {
        //success code
     })

Upvotes: 1

Related Questions