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

【问题标题】：How to create a data transfer object in angular and send it to the back end?如何以角度创建数据传输对象并将其发送到后端？
【发布时间】：2016-07-02 19:41:15
【问题描述】：

我对 angularJs 完全陌生（我实际上是一个纯粹的后端开发人员：（）。我观看了几个 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。我想现在我需要看看服务器端。

【问题讨论】：

那么具体的问题或疑问是什么？应该在服务器的请求正文中接收 json。如果不是...检查浏览器开发工具网络中的实际请求，并检查控制台是否有错误
@charlietfl 目前我在开发工具中没有错误。我刚刚更新了一张照片。我的问题是我不确定我是否做对了，这是正确的吗？我从未使用过角度，所以我不确定如何发送到后端。是的，我需要发送 JSON。网络选项卡没有显示太多，因为我认为单击 div 时我没有正确提交

标签： javascript angularjs post model-view-controller

【解决方案1】：

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

但是，还有其他问题。

在您的 $http 中，您将“gameBoardDto”对象绑定为您的请求数据。这可能不是您想要做的。如果你想发送一些数据，通常最好的方法是使用表单（更多关于表单here）来收集和包装你想要传递到后端的数据。您可以使用表单将一组不同的控件（例如文本框和复选框等）分组，然后还将这些控件中的数据分组到一个 javascript 对象中，您可以将其传递给您的 ajax 请求。您现在传递的只是您创建一次并且永远无法更改的 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>

【讨论】：

问题是 div 绑定到 onclick，并且它与 ng-click 一起工作。我编辑了codepen，现在它可以工作了。还可以在这里查看我的答案的编辑。
是的，就是这样。哇啦！ ;)

【解决方案2】：

我举一个明显的例子

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

控制器

$scope.playPage = function(data){
     console.log(data);
     //$http.post(url, data, config);
};

$scope.gameBoardDto = {
    player1:"0",
    player2:"0",
    topleft:".",
    ...
    ...
};

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

【讨论】：

我刚试过，但它告诉我 Uncaught ReferenceError: playPage is not defined。我正在审查，看看我做错了什么
如果 $scope.player1 或另一个是正确的，$scope.playPage 它是与它们进入 displayPageController 相同的变量
你确定你的角度建筑是正确的吗？
我想我修好了。我更新的代码在上面。现在它在400中失败了，我认为还可以。感谢您的帮助，我给您 +1 但我会勾选另一个答案，因为它也非常有用。

【解决方案3】：

点击事件总是由"ng-click"

触发

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

【讨论】：

如何在每个 div 中做到这一点？你能扩展一下你的答案吗？