Javascript 如何使用angular将表单数据发送到服务器？

目前，我正在使用服务器端框架CakePHP构建我的应用程序

我需要将angular集成到我的应用程序中

目前，我发送以下输入

用户.旧密码

，

用户.新密码

，

用户.新密码

使用POST访问此url

/mypasswords/new

这个很好用

我明白，要将数据发送到服务器端，我需要使用Angular中的服务

这是到目前为止我的角度代码

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

app.controller('passwordController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.changePasswordForm = function() {
    if ($scope.change_password_form.$valid) {
      // Submit as normal
    } else {
      $scope.change_password_form.submitted = true;
    }
  }
}]);

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

services.factory("UserService", function($http, $q) {
  var service;
  // service code here
});

那么，我应该在这里的

//服务代码
部分写些什么呢？我还缺什么

在呈现后，我的表单当前看起来像html。（我知道我可能必须从表单中删除操作和方法属性。是吗？）



谢谢。
如果您只想使用ajax发送表单，无需创建工厂，只需在controller中执行以下操作：

var app = angular.module("myApp", [$http]);

app.controller('passwordController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.changePasswordForm = function() {
    if ($scope.change_password_form.$valid) {
      //note: use full url, not partial....
      $http.post('http://myweb.com/mypasswords/new', change_password_form.Data) 
      .success(function(data, status, headers, config) {
        //do anything when it success..
      })
      .error(function(data, status, headers, config){
        //do anything when errors...
      });
    } else {
      $scope.change_password_form.submitted = true;
    }
  }
}]);

<form id="change_password_form" name="change_password_form" ng-controller="passwordController" ng-submit="changePasswordForm()" method="post" accept-charset="utf-8" class="ng-scope ng-pristine ng-valid">

<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>            

<input name="data[User][old_password]" ng-model="Data.old_password" id="u56" placeholder="Enter old password..." class="u56 profile_input" type="password">
<input name="data[User][new_password]" ng-model="Data.new_password" id="u57" placeholder="Enter new password..." class="u57 profile_input" type="password">
<input name="data[User][new_password_confirm]" ng-model="Data.new_password_confirm" id="u58" placeholder="Enter new password..." class="u58 profile_input" type="password">
<div id="u25" class="u25_container">
    <div id="u25_img" class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
     </div>
</div>

<div id="u27" class="u27_container">
    <input id="u27_img" class="submit_button detectCanvas" type="submit" value="SAVE">                         

</div>
</form>

<form name="change_password_form" ng-controller="passwordController"
         ng-submit="changePasswordForm()">

        <input name="data[User][old_password]" ng-model="data.User.old_password" type="password" placeholder="Enter old password..." class="u56 profile_input">
        <input name="data[User][new_password]" ng-model="data.User.new_password" type="password" placeholder="Enter new password..." class="u57 profile_input">
        <input name="data[User][new_password_confirm]" ng-model="data.User.new_password_confirm" type="password" placeholder="Enter new password again..." class="u58 profile_input">

            <div id="u25"
                 class="u25_container">
                <div id="u25_img"
                     class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
                </div>
            </div>

            <div id="u27"
                 class="u27_container">
                <button type="submit" id="u27_img" ng-click="debug()"
                     class="submit_button detectCanvas" />
            </div>
        </form>

您的表单将如下所示：

var app = angular.module("myApp", [$http]);

app.controller('passwordController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.changePasswordForm = function() {
    if ($scope.change_password_form.$valid) {
      //note: use full url, not partial....
      $http.post('http://myweb.com/mypasswords/new', change_password_form.Data) 
      .success(function(data, status, headers, config) {
        //do anything when it success..
      })
      .error(function(data, status, headers, config){
        //do anything when errors...
      });
    } else {
      $scope.change_password_form.submitted = true;
    }
  }
}]);

<form id="change_password_form" name="change_password_form" ng-controller="passwordController" ng-submit="changePasswordForm()" method="post" accept-charset="utf-8" class="ng-scope ng-pristine ng-valid">

<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>            

<input name="data[User][old_password]" ng-model="Data.old_password" id="u56" placeholder="Enter old password..." class="u56 profile_input" type="password">
<input name="data[User][new_password]" ng-model="Data.new_password" id="u57" placeholder="Enter new password..." class="u57 profile_input" type="password">
<input name="data[User][new_password_confirm]" ng-model="Data.new_password_confirm" id="u58" placeholder="Enter new password..." class="u58 profile_input" type="password">
<div id="u25" class="u25_container">
    <div id="u25_img" class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
     </div>
</div>

<div id="u27" class="u27_container">
    <input id="u27_img" class="submit_button detectCanvas" type="submit" value="SAVE">                         

</div>
</form>

<form name="change_password_form" ng-controller="passwordController"
         ng-submit="changePasswordForm()">

        <input name="data[User][old_password]" ng-model="data.User.old_password" type="password" placeholder="Enter old password..." class="u56 profile_input">
        <input name="data[User][new_password]" ng-model="data.User.new_password" type="password" placeholder="Enter new password..." class="u57 profile_input">
        <input name="data[User][new_password_confirm]" ng-model="data.User.new_password_confirm" type="password" placeholder="Enter new password again..." class="u58 profile_input">

            <div id="u25"
                 class="u25_container">
                <div id="u25_img"
                     class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
                </div>
            </div>

            <div id="u27"
                 class="u27_container">
                <button type="submit" id="u27_img" ng-click="debug()"
                     class="submit_button detectCanvas" />
            </div>
        </form>

步骤1：使用普通html而不是CakePHP中的FormHelper编写表单

表单应如下所示：

var app = angular.module("myApp", [$http]);

app.controller('passwordController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.changePasswordForm = function() {
    if ($scope.change_password_form.$valid) {
      //note: use full url, not partial....
      $http.post('http://myweb.com/mypasswords/new', change_password_form.Data) 
      .success(function(data, status, headers, config) {
        //do anything when it success..
      })
      .error(function(data, status, headers, config){
        //do anything when errors...
      });
    } else {
      $scope.change_password_form.submitted = true;
    }
  }
}]);

<form id="change_password_form" name="change_password_form" ng-controller="passwordController" ng-submit="changePasswordForm()" method="post" accept-charset="utf-8" class="ng-scope ng-pristine ng-valid">

<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>            

<input name="data[User][old_password]" ng-model="Data.old_password" id="u56" placeholder="Enter old password..." class="u56 profile_input" type="password">
<input name="data[User][new_password]" ng-model="Data.new_password" id="u57" placeholder="Enter new password..." class="u57 profile_input" type="password">
<input name="data[User][new_password_confirm]" ng-model="Data.new_password_confirm" id="u58" placeholder="Enter new password..." class="u58 profile_input" type="password">
<div id="u25" class="u25_container">
    <div id="u25_img" class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
     </div>
</div>

<div id="u27" class="u27_container">
    <input id="u27_img" class="submit_button detectCanvas" type="submit" value="SAVE">                         

</div>
</form>

<form name="change_password_form" ng-controller="passwordController"
         ng-submit="changePasswordForm()">

        <input name="data[User][old_password]" ng-model="data.User.old_password" type="password" placeholder="Enter old password..." class="u56 profile_input">
        <input name="data[User][new_password]" ng-model="data.User.new_password" type="password" placeholder="Enter new password..." class="u57 profile_input">
        <input name="data[User][new_password_confirm]" ng-model="data.User.new_password_confirm" type="password" placeholder="Enter new password again..." class="u58 profile_input">

            <div id="u25"
                 class="u25_container">
                <div id="u25_img"
                     class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
                </div>
            </div>

            <div id="u27"
                 class="u27_container">
                <button type="submit" id="u27_img" ng-click="debug()"
                     class="submit_button detectCanvas" />
            </div>
        </form>

为什么要使用完整路径？何时使用工厂？当不使用工厂时？1）因为您没有指定ng应用程序配置，2）它就像一个类，您需要它来分离锅炉板代码。通过ng应用程序配置，您的意思是这样的？看这里：也许你发现这很有用：我总是用它来做我的项目谢谢！真的很有帮助