AngularJS http不張貼爲表格

我試圖使用角度http發佈表單，並將數據作爲表單包傳遞，而不是請求包。AngularJS http不張貼爲表格

我的代碼：

// $scope will allow this to pass between controller and view 
    $scope.formData = {}; 

    // process the form 
    $scope.processForm = function() { 
    $http({ 
     method : 'POST', 
     url  : 'process.cfm', 
     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) 
    })

閱讀本

How can I post data as form data instead of a request payload?

我認爲有必要 '定義' 傳遞這樣的數據：

$.param({fkey: "key"});

在哪裏我的榜樣正在使用

個

$.param($scope.formData);

在沒有明確說明每個表單字段的希望...... 領域施展自己的領域進入了var這樣

<input type="text" name="name" class="form-control" placeholder="blah" ng-model="formData.name" >

當我提交 - 我什麼也沒有公佈。

如果有幫助 - 我把這個例子來自：http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way

和我的完整的代碼是在這裏：http://jsfiddle.net/mhLDP/雖然如預期，這並不表現 - 它顯示了{{}}

所以這裏我全碼：

<!doctype html >

<head> 

    <title>Angular Form</title> 

    <!-- LOAD BOOTSTRAP CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" > 

    <!-- LOAD JQUERY --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script> 

    <!-- LOAD ANGULAR --> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> 

    <!-- PROCESS FORM WITH AJAX (NEW) --> 
    <script> 

     // define angular module/app 
     var formApp = angular.module('formApp', []); 

     // create angular controller and pass in $scope and $http 
     function formController($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  : 'process.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.errorName = data.errors.name; 
         $scope.errorSuperhero = data.errors.superheroAlias; 
        } else { 
         // if successful, bind success message to message 
         $scope.message = data.message; 
        } 
       }); 

      }; 

     } 

    </script> 
</head> 

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

    <div class="container" > 

     <div class="col-sm-6 col-sm-offset-3" > 

      <!-- PAGE TITLE --> 
      <div class="page-header" > 

       <h1><span class="glyphicon glyphicon-tower" ></span> Submitting Forms with Angular</h1> 

      </div> 

      <!-- SHOW ERROR/SUCCESS MESSAGES --> 
      <div id="messages" ng-show="message" >{{ message }}</div> 

      <!-- FORM --> 
      <form ng-submit="processForm()" > 

       <!-- NAME --> 
       <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }" > 

        <label>Name</label> 
        <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name" > 
        <span class="help-block" ng-show="errorName" >{{ errorName }}</span> 

       </div> 

       <!-- SUPERHERO NAME --> 
       <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }" > 

        <label>Superhero Alias</label> 
        <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias" > 
        <span class="help-block" ng-show="errorSuperhero" >{{ errorSuperhero }}</span> 

       </div> 

       <!-- SUBMIT BUTTON --> 
       <button type="submit" class="btn btn-success btn-lg btn-block" > 

        <span class="glyphicon glyphicon-flash" ></span> Submit! 

       </button> 

      </form> 

     </div> 

    </div> 

</body>

這裏是從螢火蟲頭：

Response Headers 
Connection close 
Content-Type text/html;charset=UTF-8 
Date Fri, 31 Jan 2014 14:40:41 GMT 
Server Apache/2.2.22 (Win32) mod_jk/1.2.32 
Transfer-Encoding chunked 
server-error true 
Request Headers 
Accept application/json, text/plain, */* 
Accept-Encoding gzip, deflate 
Accept-Language en-US,en;q=0.5 
Content-Type application/x-www-form-urlencoded 
Cookie 
Host 127.0.0.1 
Referer http://127.0.0.1/index_angularJS.htm 
User-Agent Mozilla/5.0 (Windows NT 6.3; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

來源

2014-01-30 jpmyob

怎麼樣：'。.param（{data：$ scope.formData}）;' – tymeJV

@tyme - 不去 - 相同的概率。 – jpmyob

指令$ .PARAM（{數據：$ scope.formData}）; 產生以下對象：

{ 
    data: { 
     name: 'user input name', 
     superheroAlias: 'user input alias' 
    } 
}

和$ .PARAM（$ scope.formData），

{ 
    name: 'user input name', 
    superheroAlias: 'user input alias' 
}

您的PHP文件，喲應該使用：

data : $.param($scope.formData),

來源

2014-08-23 01:40:26

 $scope.processForm = function($scope.formData) { 
     $http({ 
      method : 'POST', 
      url  : 'process.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) 
     })

你必須通過$ scope.formData in函數

來源

2016-11-01 06:44:51 user7098427

AngularJS http不張貼爲表格

回答

相關問題