androidangularjsjsoncordovapostdata

I want to post data to http://hmkcode.appspot.com/jsonservlet using angularjs&cordova


I want to post data to the above link(in spite of using a webservice) using cordova and angularjs. I have used alerts in between to know which functions are working properly. sign Up Function is not working, it is entering the function but not entering the request method to post data. Is there any error in request.success(function(data)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>Post Data</title>
</head>
<body>
    <div ng-app="HelloApp" ng-controller="HelloCtrl">
        <form role="form"  action="#">
            <div>
                Name: <input type="text" ng-model="name"><br>
                Country: <input type="text" ng-model="country"><br>
                Twitter: <input type="text" ng-model="twitter"><br>
                <button ng-click="signUp()">Save</button><br>
                <span>{{responseMessage}}</span>           
        </form>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    <script>
        alert('Before controller');
        var helloApp = angular.module("HelloApp", []);
        helloApp.controller("HelloCtrl", [ '$scope','$http', function($scope,$http) 
        {
            alert('Entered Controller');
            $scope.name = "Calvin Hobbes";
            $scope.country = "US";
            $scope.twitter = "as@gmail.com";

            $scope.signUp = function () {
                /*  $scope.Message = "Button clicked."*/
                alert("Button CLicked");;
                var request = $http({
                    method: "post",
                    dataType:'json',
                    url: "http://hmkcode.appspot.com/jsonservlet",
                    crossDomain : true,
                    data: {
                        'name': $scope.name,
                        'country': $scope.country,
                        'twitter': $scope.twitter
                    },
                        headers: { 'Accept':' text/plain','Content-Type': 'textjson' }
                });
                /* Successful HTTP post request or not */
                request.success(function(data) {
                    alert("success function");
                    if(data == "1"){
                        $scope.responseMessage = "Successfull";
                    }
                    if(data == "2"){
                        $scope.responseMessage = "failed";
                    } else if(data == "0") {
                        $scope.responseMessage = "Error";
                    }  
                });
            }
        }]);
   </script>
  </body>
  </html>

How can i post the data to the webservice(http://hmkcode.appspot.com/jsonservlet)


Solution

  • You have to change your controller the following way. Since you are using the new version of angularjs, change .success to .then. And also when you are using form, it is better to use ng-submit

    JS:

    $scope.signUp = function () {
                    /*  $scope.Message = "Button clicked."*/
                    alert("Button CLicked");;
                    var request = $http({
                        method: "post",
                        dataType:'json',
                        url: "http://hmkcode.appspot.com/jsonservlet",
                        crossDomain : true,
                        data: {
                            'name': $scope.name,
                            'country': $scope.country,
                            'twitter': $scope.twitter
                        },
                            headers: { 'Accept':' text/plain','Content-Type': 'application/json' }
                    });
                    /* Successful HTTP post request or not */
                    request.then(function(data) {
                        alert("success function");
                        if(data.data == "1"){
                            $scope.responseMessage = "Successfull";
                        }
                        if(data.data == "2"){
                            $scope.responseMessage = "failed";
                        } else if(data.data == "0") {
                            $scope.responseMessage = "Error";
                        }  
                    });
                }
    

    HTML:

    <form role="form" ng-submit="signUp()">
                <div>
                    Name: <input type="text" ng-model="name"><br>
                    Country: <input type="text" ng-model="country"><br>
                    Twitter: <input type="text" ng-model="twitter"><br>
                    <button type="submit">Save</button><br>
                    <span>{{responseMessage}}</span>           
     </form>