Angular JS-v1.2.0到v1.3破坏了我的http帖子从表单

Question

Can someone please help me out, I want to upgrade this page to the latest version of angular but for some reason it doesnt work, I have tried defining the controllers rather than having them as functions but then I lose all my error messages that I have set up... Javascript is not my strongest skill so any help is greatly appreciated 有人可以帮帮我吗，我想将此页面升级到最新版本的angular，但是由于某种原因它不起作用，我尝试定义控制器而不是将它们作为函数，但是我丢失了所有的错误消息设置... Java语言不是我最擅长的技能，因此对您的帮助将不胜感激

  <!DOCTYPE html>
      <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
          <link rel="stylesheet" type="text/css" href="style.css">
      </head>

          <!-- apply the module and controller to our body so angular is applied to that -->
      <body ng-app="LoginformApp" ng-controller="formControllerApp">
          <div class="wrapper">

               <div class="clear"></div> 
          <form method="post" action="" ng-submit="processForm()">
                <div>

            <input type="text" id="emailaddy" name="email" placeholder="Email" ng-model="formData.email"> <br> <!-- attach ng to the form input -->
              <span class="help-block" ng-show="errorEmail">{{ errorEmail }}</span> 
                </div> 
                <div>
                  <label class="lock" for="password">
                    <svg viewBox="0 0 32 32">
                       <g filter="">
                         <use xlink:href="#lock-locker"></use>
                        </g>
                      </svg>  
                  </label>
            <input type="text" id="paww" name="password" placeholder="Password" ng-model="formData.password"> <br> <!-- attach ng to the form input -->
              <span class="help-block" ng-show="errorPassword">{{ errorPassword }}</span> 
                </div> 
               <div>
            <input type="submit" id="followbtn" name="submit" placeholder="Login"> <br>
              </div>

            </form>  

          <!-- <pre>
              {{ formData }}
          </pre> -->

          <div class="responsebox">
            {{ message }} 
            <!-- ajax success response here -->
          </div>
          </div>
          <script type="text/javascript">
              // define angular module/app
            var formApp = angular.module('LoginformApp', []);

            // create angular controller and pass in $scope and $http
            function formControllerApp($scope, $http) {

              // create a blank object to hold our form information
              // $scope will allow this to pass between controller and view
              $scope.formData = {};
                // process the form
              $scope.processForm = function() {
                $http({
                method  : 'POST',
                url     : 'http://example.com/parse-login.php',
                data    : $.param($scope.formData),  // pass in data as strings
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
               })
                .success(function(data) {
                  console.log(data);

                  if (!data.success) {
                    // if not successful, bind errors to error variables
                   $scope.errorEmail = data.errors.email;
                   $scope.errorPassword = data.errors.password;
                    //$scope.errorSuperhero = data.errors.superheroAlias;
                  } else {
                    // if successful, bind success message to message
                    $scope.message = data.message;
                  }
                });
              };
            }
          </script>
      </body>
  </html>

Answer 1

Try the code below: 请尝试以下代码：

  <!DOCTYPE html>
          <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
          <link rel="stylesheet" type="text/css" href="style.css">


          </head>



          <!-- apply the module and controller to our body so angular is applied to that -->
          <body ng-app="LoginformApp" ng-controller="formControllerApp">


          <div class="wrapper">

               <div class="clear"></div> 
          <form method="post" action="" ng-submit="processForm()">
                <div>

            <input type="text" id="emailaddy" name="email" placeholder="Email" ng-model="formData.email"> <br> <!-- attach ng to the form input -->
              <span class="help-block" ng-show="errorEmail">{{ errorEmail }}</span> 
                </div> 
                <div>
                  <label class="lock" for="password">
                    <svg viewBox="0 0 32 32">
                       <g filter="">
                         <use xlink:href="#lock-locker"></use>
                        </g>
                      </svg>  
                  </label>
            <input type="text" id="paww" name="password" placeholder="Password" ng-model="formData.password"> <br> <!-- attach ng to the form input -->
              <span class="help-block" ng-show="errorPassword">{{ errorPassword }}</span> 
                </div> 
               <div>
            <input type="submit" id="followbtn" name="submit" placeholder="Login"> <br>
              </div>

            </form>  

          <!-- <pre>
              {{ formData }}
          </pre> -->

          <div class="responsebox">
            {{ message }} 
            <!-- ajax success response here -->
          </div>


          </div>




          <script type="text/javascript">
              // define angular module/app
            var formApp = angular.module('LoginformApp', []);

            // create angular controller and pass in $scope and $http
            formApp.controller("formControllerApp",['$scope','$http', function formControllerApp($scope, $http) {

              // create a blank object to hold our form information
              // $scope will allow this to pass between controller and view
              $scope.formData = {};
                // process the form
              $scope.processForm = function() {
                $http({
                method  : 'POST',
                url     : 'http://example.com/parse-login.php',
                data    : $.param($scope.formData),  // pass in data as strings
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
               })
                .success(function(data) {
                  console.log(data);

                  if (!data.success) {
                    // if not successful, bind errors to error variables
                   $scope.errorEmail = data.errors.email;
                   $scope.errorPassword = data.errors.password;
                    //$scope.errorSuperhero = data.errors.superheroAlias;
                  } else {
                    // if successful, bind success message to message
                    $scope.message = data.message;
                  }
                });
              };
            }]);

          </script>






          </body>


          </html>

Answer 2

Just remove the method: 'POST' and the url: /.. from your object and do this.. 只需从对象中删除方法：“ POST”和url：/ ..，然后执行此操作即可。

$http.post('/url', { ... })

See Angular 1.3.18 $http documentation 参见Angular 1.3.18 $ http文档

Angular JS-v1.2.0到v1.3破坏了我的http帖子从表单

问题描述

2 个解决方案

解决方案1
0 2015-09-10 15:19:54

解决方案2
0 2015-09-10 15:22:29

Angular JS-v1.2.0到v1.3破坏了我的http帖子从表单

问题描述

2 个解决方案

解决方案1 0 2015-09-10 15:19:54

解决方案2 0 2015-09-10 15:22:29

解决方案1
0 2015-09-10 15:19:54

解决方案2
0 2015-09-10 15:22:29