如何使用 AngularJS 表单将 POST 数据发送到 Play Framework Controller答案

【问题标题】：How to send POST data with an AngularJS form to Play Framework Controller如何使用 AngularJS 表单将 POST 数据发送到 Play Framework Controller
【发布时间】：2014-02-14 01:38:55
【问题描述】：

我的 Web 应用程序（Play Framework 2.2.1 和 Scala）上有一个使用 ajax 和 AngularJS 显示的客户列表。它工作正常，现在我想在我的列表中动态添加一个新客户，并弹出一个我制作的 JS（使用 jQuery UI）。

我首先搜索如何在浏览器上显示由 HTML/AngularJS 表单发送的数据，但是当我点击提交按钮时，什么也没有发生……而且我不知道为什么，其他 AngularJS 操作有效。

这是我的代码：

JavaScript

function AddCustomerController($scope) {
    $scope.add = function() {
        $scope.customers.push({id: $scope.email, phone: $scope.phone, isActivated: $scope.activation, name: $scope.name, roleType: $scope.roleType});
    }
}

HTML

<div id="dialogAddCustomer" title="title" ng-controller="AddCustomerController">
    <label id="dialNewCustomerName">Add Customer</label>

    <label class="lblPopUp">Email</label>
    <input type="text" id="dialNewCustomerEmail" class="form-control" ng-model="email" />

    <label class="lblPopUp">Phone Number</label>
    <input type="text" id="dialNewCustomerPhone" class="form-control" ng-model="phone" />

    <label class="lblPopUp">Customer Activated ?</label> <br />
    <input type="radio" name="activation" id="dialNewCustomerYes" value="1" ng-model="activation" /> Yes
    <input type="radio" name="activation" id="dialNewCustomerNo" value="2" ng-model="activation" /> No

    <label class="lblPopUp">Name</label>
    <input type="text" id="dialNewCustomerName" class="form-control" ng-model="name" />

    <label class="lblPopUp">Role Type</label> <br />
    <select class="form-control" ng-controller="RoleTypesController">
        <option ng-repeat="roleType in roleTypes" value="{{roleType.id}}" ng-model="roleType">{{roleType.name}}</option>
    </select>
    <br />
    <button class="btn btn-default" type="submit" ng-click="add()">Validate</button>
</div>

其次，我不知道如何将数据正确推送到我的控制器（我已经在网上搜索过）以在数据库中插入新客户。

有什么想法或提示吗？

【问题讨论】：

标签： javascript ajax angularjs scala playframework-2.0

【解决方案1】：

也许您应该将AddCustomerController 添加到HTML，或者将add() 函数移动到CustomerController。

您还应该将customer 对象放入作用域，并将各个字段添加到其中，然后通过customer.email、customer.phone 等访问它。这将有助于防止范围问题，并使控制器代码更简单。

此外，这与 Play 无关，因为您不会向服务器发送任何数据（查看 Angular 文档中的 $http 以了解如何执行此操作）。

【讨论】：

糟糕，我忘了更改我的控制器，我试图测试一些东西.. 我会编辑这个。无论如何，我已经尝试放置一个客户对象，但它似乎没有任何改变。

【解决方案2】：

从来没有向服务器发送任何东西，因为代码从不指示 AngularJS 发送任何东西。

您的add 函数仅修改本地范围，不调用$http.post()。

您可能在 html 方面考虑得太多，而在 AngularJS 方面考虑得不够。有了角度，你不需要有形式；它可以很方便 - 特别是用于验证 - 但它不是必需的。模型是关键，不管有没有形式。

一般来说，我建议让您的inputs 修改对象的某些部分，所以不要：

<input type="text" ng-model="email" />
<input type="text" ng-model="phone" />
<button type="submit" ng-click="add()">Add</button>

改为：

<input type="text" ng-model="customer.email" />
<input type="text" ng-model="customer.phone" />
<button type="submit" ng-click="add(customer)">Add</button>

控制器然后类似：

function AddCustomerController($scope, $http) {
    $scope.customer = {};
    $scope.add = function(newCustomer) {
        // this assumes newCustomer has been validated
        $http.post('/api/customers', newCustomer); // TODO: handle response
    }
}

作为旁注，你越是使用 angular，你就越不需要 jquery 和 jquery ui - 我有一个规则，一个页面要么是 jquery 要么是 angular，但永远不会两者兼而有之。 YMMV。

【讨论】：