我有以下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>
它工作正常，但当我调用“购买”时，它不会重新加载book模型。所以我必须调用浏览器刷新才能看到更改。
问题: 如何让我的模型在点击“购买”后自动更新值？
最佳答案
发生这种情况是因为您使用的是 jQuery 而不是 Angular。
将脚本更改为
<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>
我定义了一个名为 post 的作用域函数，它对您的服务器进行 $http 调用。
然后，使用 ng-click 调用 post。将按钮更改为
<input type="submit" ng-click="post()" name="submit" value="Purchase" id="call">
编辑
我做了一些更改，因为这是一个不同的调用。我还建议将 ng-models 添加到 buyBookForm，这样您就可以删除 jQuery。
关于javascript - 使用 AngularJS 发布请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38770365/