Javascript 使用AngularJS发布请求_Javascript_Angularjs_Ajax

Javascript 使用AngularJS发布请求

javascript angularjs ajax

Javascript 使用AngularJS发布请求,javascript,angularjs,ajax,Javascript,Angularjs,Ajax,我有以下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"></scrip

我有以下

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>


温泉书店
var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$http）{
$http.get（“http://localhost:8080/book_store/rest/books_json/get")
.然后（功能（响应）{
$scope.books=response.data；
});
$（文档）.ready（函数（）{
$（“#调用”）。单击（函数（）{
$.ajax({
类型：“post”，
url:“http://localhost:8080/book_store/rest/books_json",
数据：$（'#buyBookForm'）。序列化（），
成功：功能（响应）{
$scope.books=response.data；
}
});
});
});
});
书店
选择任何你喜欢的书：
书名
作者
体裁
价格
出售
购买人

{{book.name}
{{book.author.name}
{{book.genre}
{{book.price}}
{{书.买的}}
{{book.buyCount}

它工作正常，但当我调用“购买”时，它不会重新加载

book

model。因此，我必须调用浏览器刷新以查看更改

问题：

如何在单击“购买”后使模型自动更新值？这是因为您使用的是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>


var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$http）{
$http.get（“http://localhost:8080/book_store/rest/books_json/get")
.然后（功能（响应）{
$scope.books=response.data；
});
$scope.post=函数（）{
$http.post（“http://localhost:8080/book_store/rest/books_json“，$（'#buyBookForm'）。序列化（））
.然后（功能（响应）{
$scope.books=response.data；
});
}
});

我正在定义一个名为post的作用域函数，它对您的服务器进行$http调用

然后，用ng点击呼叫post。将按钮更改为

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

编辑

我做了一些改变，因为这是一个不同的电话。我还建议将ng模型添加到buyBookForm中，这样您就可以删除jQuery。

这是因为您使用的是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>


var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$http）{
$http.get（“http://localhost:8080/book_store/rest/books_json/get")
.然后（功能（响应）{
$scope.books=response.data；
});
$scope.post=函数（）{
$http.post（“http://localhost:8080/book_store/rest/books_json“，$（'#buyBookForm'）。序列化（））
.然后（功能（响应）{
$scope.books=response.data；
});
}
});

我正在定义一个名为post的作用域函数，它对您的服务器进行$http调用

然后，用ng点击呼叫post。将按钮更改为

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

编辑

我做了一些改变，因为这是一个不同的电话。我还建议将ng模型添加到buyBookForm中，这样您就可以删除jQuery。

使用

ng model

指令了解所选书籍

 <input ng-model="book.isSelected"

使用

ng model

指令了解所选书籍

 <input ng-model="book.isSelected"

使用角度感知的

$http

而不是

$。ajax

而不是。此外，尽可能使用

ng click

而不是绑定jQuery样式的click事件处理程序。如果使用角度感知，请停止使用jQuery。甚至都不要加载库，所以你不得不想办法“以角度的方式”完成。相信我：一旦你学会了，就会容易得多。当您使用jQuery时，它不会更新模型，您最终会得到无尽的

$timeout

s和

$scope.$apply（）

suse

$http

，它是角度感知的，而不是

$。ajax

也不是，尽可能使用

ng click

而不是绑定jQuery样式的click事件处理程序。如果使用Angular，请停止使用jQuery。甚至都不要加载库，所以你不得不想办法“以角度的方式”完成。相信我：一旦你学会了，就会容易得多。当您使用jQuery时，它不会更新模型，最终您会得到无尽的

$timeout

s和

$scope.$apply（）

s此代码中的原始按钮不是“刷新”函数，而是单独的HTTP Post方法。此代码中的原始按钮不是“刷新”函数，而是单独的HTTP Post方法。