Question

我是angularJs的新手（我实际上是一个纯粹的后端dev :(）。我观看了几个youtube视频，我正在尝试创建一个非常简单的ui，它使用angular来与我后面的Spring mvc应用程序进行对话。

我遇到了一个问题，我不知道如何使用$ http.post将javascript对象发送到我的后端。有人能帮助我吗？实际上，不只是那个，我也有点废话html，我不知道如何点击div时触发angularjs。

我告诉你到目前为止我在角度方面有什么...

这是我的观点

 <!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TicTacToe</title>
    <link rel="stylesheet" type="text/css" href="resources/css/design.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
    <script src="resources/javascript/tictactoe.js"></script>
</head>
<body ng-controller="displayPageController">
<div id="player-1">PLAYER 1<br/>
    {{Board.player1}}
</div>
<div id="game">

    <div id="top-left" ng-click='playPage()'>{{Board.topleft}}</div>
    <div id="top" ng-click='playPage()'>{{Board.top}}</div>
    <div id="top-right" ng-click='playPage()'>{{Board.topright}}</div>
    <div id="left" ng-click='playPage()'>{{Board.left}}</div>
    <div id="middle" ng-click='playPage()'>{{Board.middle}}</div>
    <div id="right" ng-click='playPage()'>{{Board.right}}</div>
    <div id="bottom-left" ng-click='playPage()'>{{Board.bottomleft}}</div>
    <div id="bottom" ng-click='playPage()'>{{Board.bottom}}</div>
    <div id="bottom-right" ng-click='playPage()'>{{Board.bottomright}}</div>
</div>
<div id="player-2">PLAYER 2<br/>
    {{Board.player2}}
</div>
</body>
</html>

这是我的javascript

   var myApp = angular.module('myApp',[]);

var gameBoardDto = {
player1:"0",
player2:"0",
topleft:".",
top:".",
topright:".",
left:".",
middle:".",
right:".",
bottomleft:".",
bottom:".",
bottomright:"."
};

myApp.controller('displayPageController', function($scope,$http) {

  $scope.Board = {};

  $scope.Board.player1 = gameBoardDto.player1;
  $scope.Board.player2 = gameBoardDto.player2;
  $scope.Board.topleft = gameBoardDto.topleft;
  $scope.Board.top = gameBoardDto.top;
  $scope.Board.topright = gameBoardDto.topright;
  $scope.Board.left = gameBoardDto.left;
  $scope.Board.middle = gameBoardDto.middle;
  $scope.Board.right = gameBoardDto.right;
  $scope.Board.bottomleft = gameBoardDto.bottomleft;
  $scope.Board.bottom = gameBoardDto.bottom;
  $scope.Board.bottomright = gameBoardDto.bottomright;

  $scope.playPage = function() {
      $http({
            method: 'POST',
            url: 'http://localhost:8080/play',
            data: $scope.Board,
            headers: {'Content-Type': 'application/json;charset=UTF-8'}
        }).success(function(gameBoardDto) {
              $scope.gameBoardDto = gameBoardDto;
          }.bind(this));
  };
});

更新我想我设法使用上面的代码触发了函数，现在我收到错误400.我想我现在需要看一下服务器端。

Answer 1

你使用$ http post方法很好（除了你第一次初始化$ scope.gameBoardDto对象是在你的http post函数的成功处理程序中）。

但是，还有其他问题。

在$ http中，您将“gameBoardDto”对象绑定为您的请求数据。这可能不是你想要做的。如果您想发送一些数据通常最好的方法是使用表单（更多在表单here上）来收集和包装您想要传递给后端的数据。您可以使用表单对一组不同的控件进行分组，例如文本框和复选框等，然后还将这些控件中的数据分组到一个可以传递给ajax请求的javascript对象中。你现在传递的只是你创建一次的javascript对象，永远无法改变。
您有两个控制器，这两个控制器都已在myApp模块中注册，这很好，除了其中一个永远不会被调用或使用。 displayPageController在加载时被绑定到页面，而我想当你单击页面上的某些控件时，playPageController应该是你想要调用的方法。如果是这种情况，您应该在displayPageController的范围内创建一个方法，然后在控件的onclick事件中调用它。
```
app.controller('someController', ['$scope', function($scope) {
    $scope.theOnClickFunction = function() {
       // your logic here
    };
}
```
然后，在你的html中，你会像这样调用“theOnClickFunction”：
```
<a ng-click="theOnClickFunction()">Play</a>
```
另一件事是，您可能不希望将所有变量直接绑定到$ scope。您应该以某种方式对它们进行分组，例如在Board对象中，一旦它准备好就绑定到$ scope。

我准备了一个小codepen这些建议，所以你可以看看。您的代码可能还有其他一些问题，但这些问题对我来说似乎是一个很好的起点。

编辑：$ scope方法应该像这样调用：

<div id="someDiv" ng-click="playPage()">{{ Board.topLeft }}</div>

Answer 2

我引用一个明确的例子

Fragment

控制器

<div id="top-left" ng-click='playPage(gameBoardDto)'>{{gameBoardDto.topleft}}</div>

Answer 3

点击事件始终由“ng-click”

触发

<div id="game" ng-controller="playPageController"> ------------------- </div>

如何以角度创建数据传输对象并将其发送到后端？

3 个答案: