Rudziankoŭ Rudziankoŭ - 4 months ago 18
Ajax Question

Post request with AngularJS

I have following

html
:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SPA book_store</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get("http://localhost:8080/book_store/rest/books_json/get")
.then(function (response) {
$scope.books = response.data;
});
$(document).ready(function () {
$('#call').click(function () {
$.ajax({
type: "post",
url: "http://localhost:8080/book_store/rest/books_json",
data: $('#buyBookForm').serialize(),
success: function (response) {
$scope.books = response.data;
}
});
});
});
});

</script>
</head>
<body>


<div class="container" ng-app="myApp" ng-controller="myCtrl">
<h1>Book Store</h1>
<p>Choice any book you like:</p>

<form id="buyBookForm" method="post">
<table id="table" class="table">
<thead>
<tr>
<th>Book Name</th>
<th>Author</th>
<th>Genre</th>
<th>Price</th>
<th>Sold</th>
<th>Bought By</th>
</tr>
</thead>
<tbody>

<input id="filter_input" type="text" ng-model="nameText"/>
<ul>
<tr ng-repeat="book in books | filter:nameText | orderBy:'name'">
<td>
<input type="checkbox" name="book{{book.name}}"
value="{{book.book_id}}"> <label>{{book.name}}</label>
</td>
<td>{{book.author.name}}</td>
<td>{{book.genre}}</td>
<td>{{book.price}}</td>
<td>{{book.bought}}</td>
<td>{{book.buyCount}}</td>
</tr>
</ul>
</tbody>
</table>

</form>
<input type="submit" name="submit" value="Purchase" id="call">
</div>

</body>
</html>


It works fine but when I call "Purchase" it doesn't reload
book
model. S o I have to call browser refresh to see changes.

Question:
How can I make my model autoupdate values after click "Purchase"?

Answer

That happens because you are using jQuery instead of angular.

Change your script to

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {


   $http.get("http://localhost:8080/book_store/rest/books_json/get")
       .then(function (response) {
           $scope.books = response.data;
    });

   $scope.post = function(){
      $http.post("http://localhost:8080/book_store/rest/books_json", $('#buyBookForm').serialize())
       .then(function (response) {
           $scope.books = response.data;
       });
   }


});
</script>

I'm defining a scope function called post, that makes the $http call to your server.

Then, call post with ng-click. Change the button to

<input type="submit" ng-click="post()" name="submit" value="Purchase" id="call">

EDIT

I've made some changes, since its a different call. I would also recommend adding ng-models to the buyBookForm, so you could remove jQuery.

Comments