AngularJs $http post on page load

Question

my page is display users from database. when form submit i can display $http.post data. But page loaded nothing is displayed. How i can display my $http.post data page loaded(sorry everyone my english very bad)

This is my view.html

    <!DOCTYPE html>

<html ng-app="myapp">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src='angular.js' type="text/javascript"></script>
        <script>
            angular.module('myapp', [])
                    .controller('mycon', ['$scope', '$http', function($scope, $http) {

                            var update = function() {
                                $http.post('query.php').success(function(data, status) {
                                    return data;
                                });
                            };

                            $scope.send = function() {
                                var data = JSON.stringify($scope.user);

                                $http.post('query.php', data).success(function(data, status) {
                                    $scope.da = data;
                                    $scope.angularList = data; // or update();
                                });
                            };
                            $scope.angularList = update();

                        }]);
        </script>
    </head>
    <body ng-controller="mycon">

        <ul ng-repeat="mylist in angularList">
            <li>{{mylist.name}}</li>
            <li>{{mylist.password}}</li>
            <li>{{mylist.role}}</li>
        </ul>

        <h1> Add new user:</h1>
        <form ng-submit="send()">
            Name:   <input type="text" ng-model="user.name"/> 
            Login:  <input type="text" ng-model="user.pass"/>

            <select  ng-model="user.role">
                <option>user</option>
                <option>admin</option>
            </select>
            <input type="submit"  value="Add"/>
        </form>
        data: {{da}}<br>
        status: {{st}}
        <hr>
    </body>
</html>

This is my query.php

 $con = mysql_connect('localhost', 'root', '');
mysql_select_db('phpang');


if(json_decode(file_get_contents("php://input"))){
$data=json_decode(file_get_contents("php://input"));
$fn=$data->name;
$ln=$data->pass;
$rl=$data->role;                                                                                                                         

$query_ins='insert into users (name,password,role) values("'.$fn.'","'.$ln.'","'.$rl.'")';
mysql_query($query_ins);
}
$query='select * from users'; 
$select=mysql_query($query);
$myphplist=[];
while ($row=mysql_fetch_array($select)) {
    $myphplist[]=$row;
}

$myJson=json_encode($myphplist);

echo $myJson;

where is 'mylist' in your code?

atmd
– atmd

2015-01-19 13:29:50 +00:00
Commented Jan 19, 2015 at 13:29 — atmd
– atmd, Commented Jan 19, 2015 at 13:29
myList is array and equals $myJson

Beginner
– Beginner

2015-01-19 13:31:20 +00:00
Commented Jan 19, 2015 at 13:31 — Beginner
– Beginner, Commented Jan 19, 2015 at 13:31

Arūnas Smaliukas · Accepted Answer · 2015-01-19 14:01:46Z

3

$http makes async calls, so you should use callbacks or something.

                        var update = function(callback) {
                            $http.get('query.php').success(function(data, status) {
                                callback(data);
                            });
                        };

                        $scope.send = function() {
                            var data = JSON.stringify($scope.user);

                            $http.post('query.php', data).success(function(data, status) {
                                $scope.da = data;
                                $scope.angularList = data; // or update();
                            });
                        };

                        update(function(data){
                            $scope.angularList = data;
                        });

Some tips:

You don't need to do JSON.stringify($scope.user), you can pass your object, like $http.post('query.php', $scope.user)

Use GET instead of POST in this case. Use POST only if it makes some changes to your data.

edited Jan 19, 2015 at 14:01

answered Jan 19, 2015 at 13:30

Arūnas Smaliukas

3,3216 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arūnas Smaliukas Over a year ago

do you see my example? I made it for you. Try it out, it should work. It is callback version of your code

Arūnas Smaliukas Over a year ago

I think because $http.post() requires some data. I have changed to $http.get() in your update function. Try it out.

Collectives™ on Stack Overflow

AngularJs $http post on page load

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related