我对 angularJs 完全陌生(我实际上是一个纯粹的后端开发人员:( )。 我观看了几个 youtube 视频，我正在尝试创建一个非常简单的 ui，它使用 Angular 与后端的 Spring mvc 应用程序进行对话。
我遇到了一个问题，我不知道如何使用 $http.post 将 javascript 对象发送到我的后端。有人可以帮助我吗？ 实际上，不仅如此，我对 html 也有点糟糕，我不知道如何 单击 div 时触发 angularjs。
我向您展示到目前为止我在 Angular 方面所掌握的内容......
这是我的观点
<!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。我想现在我需要看看服务器端。
最佳答案
您使用 $http post 方法没有问题(除了您第一次初始化 $scope.gameBoardDto 对象是在 http post 函数的成功处理程序中)。
但是，还有其他问题。
- 在您的 $http 中，您将“gameBoardDto”对象绑定(bind)为您请求的数据。这可能不是您想要做的。如果您想发送一些数据，通常最好的方法是使用表单(更多关于表单 here )来收集和包装您想要传递到后端的数据。您可以使用表单将一堆不同的控件(例如文本框和复选框等)分组，然后将这些控件中的数据分组到一个 javascript 对象中，您可以将其传递给 ajax 请求。您现在传递的只是您创建一次并且永远无法更改的 JavaScript 对象。
您有两个 Controller ，它们都注册到您的 myApp 模块中，这很好，只是其中一个从未被调用或使用。 displayPageController 在加载时绑定(bind)到页面，而我想 playPageController 应该是您单击页面上的某些控件时想要调用的方法。如果是这种情况，您应该在 displayPageController 的范围内创建一个方法，然后在控件的 onclick 事件中调用它。
app.controller('someController', ['$scope', function($scope) { $scope.theOnClickFunction = function() { // your logic here }; }然后，在您的 html 中，您将像这样调用“theOnClickFunction”:
<a ng-click="theOnClickFunction()">Play</a>另一件事是，您可能不想将所有变量直接绑定(bind)到 $scope。您应该以某种方式将它们分组，就像在 Board 对象中一样，一旦准备好就将其绑定(bind)到 $scope。
我准备了一个小codepen有了这些建议，你可以看看。您的代码可能还存在一些其他问题，但这些对我来说似乎是很好的起点。
编辑:$scope方法应该像这样调用:
<div id="someDiv" ng-click="playPage()">{{ Board.topLeft }}</div>
关于javascript - 如何在Angular中创建数据传输对象并将其发送到后端？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38163853/