發佈數據REST API與angularjs

Question

我有一個後端寫在Django和它看起來像這樣：

HTTP 200 OK 
Allow: GET, POST, HEAD, OPTIONS 
Content-Type: application/json 
Vary: Accept 

[ 
    { 
     "message_body": "Hi mam, you are amazing!!!", 
     "deleted": false, 
     "id": 7, 
     "timestamp": "2017-08-23T15:22:00.676099Z", 
     "moderator_approval_count": 0, 
     "verified_by_moderators": true, 
     "last_like_activity_id": 8, 
     "last_like_count": 2, 
     "likes": [ 
      { 
       "message_id": 7, 
       "liked": true, 
       "unliked": false, 
       "id": 7, 
       "timestamp": "2017-08-26T05:56:02.167164Z", 
       "user_id": 1 
      }, 
      { 
       "message_id": 7, 
       "liked": false, 
       "unliked": true, 
       "id": 8, 
       "timestamp": "2017-08-26T05:57:49.756284Z", 
       "user_id": 1 
      } 
     ], 
     "teacher_id": 5 
    }, 
    { 
     "message_body": "Hi sir, you are amazing^34 !!!", 
     "deleted": false, 
     "id": 13, 
     "timestamp": "2017-08-23T19:20:07.468438Z", 
     "moderator_approval_count": 0, 
     "verified_by_moderators": true, 
     "last_like_activity_id": 6, 
     "last_like_count": 1, 
     "likes": [ 
      { 
       "message_id": 13, 
       "liked": true, 
       "unliked": false, 
       "id": 6, 
       "timestamp": "2017-08-23T19:32:20.652049Z", 
       "user_id": 1 
      } 
     ], 
     "teacher_id": 6 
    }, 
    { 
     "message_body": "Hi sir, you are great!!!", 
     "deleted": false, 
     "id": 14, 
     "timestamp": "2017-08-25T08:49:34.158602Z", 
     "moderator_approval_count": 0, 
     "verified_by_moderators": true, 
     "last_like_activity_id": -1, 
     "last_like_count": 0, 
     "likes": [], 
     "teacher_id": 7 
    }, 
    { 
     "message_body": "You're a wonderful teacher, mam!", 
     "deleted": false, 
     "id": 15, 
     "timestamp": "2017-08-26T15:14:44.745096Z", 
     "moderator_approval_count": 0, 
     "verified_by_moderators": true, 
     "last_like_activity_id": -1, 
     "last_like_count": 0, 
     "likes": [], 
     "teacher_id": 5 
    } 
] 

我使用它部署一個虛擬環境。 我的HTML看起來像這樣：

<div class="form-group" ng-controller="createMessage"> 
     <label class="control-label" for="selectTeacher">To</label> 
     <select class="form-control" id="selecT" ng-model="chosen.teacher" ng-options="teacher.name for teacher in teachers track by teacher.id" required> 
     </select> 
     <textarea class="form-control" id="message" cols="auto" rows="10" ng-model="note" placeholder="Write your message" required></textarea> 
     </div> 
     <div> 
     <button type="submit" class="form-control" id="subBtn" ng-click="postData(note, chosen.teacher.id)">Post</button> 
     </div> 

我已經使用chosen.teacher.id並注意在後臺發佈上述消息。這裏是我的app.js爲以下內容：

var app = angular.module('info', []); 

app.controller('createMessage', function($scope, $http) { 
    $scope.teachers = []; 
    $scope.chosen = {}; 
    $http.get('http://127.0.0.1:10000/compliments/teachers/'). 
     then(function(response) { 
      $scope.teachers = response.data; 
     }); 
    $scope.chosen.teacher = { id : 5, name : 'Dr. Ananya Kanjilal'}; 
    var config = { 
     headers: { 
      'Content-type': 'application/json' 
     } 
    }; 
}); 

function postData(message, t_id) { 
    $http.post('http://127.0.0.1:10000/compliments/messages/', 
     { 
      message_body: message, 
      deleted: false, 
      id: t_id 
     }, 
     { 
      headers: { 
       'Content-type': 'application/json' 
      } 
     }).success(function(response) { 
      console.log("ok"); 
     }).error(function(response) { 
      console.log("error"); 
      console.log(response.data); 
     }); 
} 

我得到沒有錯誤，但數據沒有被髮布到服務器。我是前端新手。請幫助舉例。提前致謝！

Answer 1

我更新我的回答，按您的更新問題

首先在app.js的定義你的控制器內，並在$範圍對象的POSTDATA功能

app.js

var app = angular.module('info', []); 

app.controller('createMessage', function($scope, $http) { 
$scope.teachers = []; 
$scope.chosen = {}; 
$http.get('http://127.0.0.1:10000/compliments/teachers/'). 
    then(function(response) { 
     $scope.teachers = response.data; 
    }); 
$scope.chosen.teacher = { id : 5, name : 'Dr. Ananya Kanjilal'}; 
var config = { 
    headers: { 
     'Content-type': 'application/json' 
    } 
}; 
$scope.postData = function(message, t_id) { 
$http.post('http://127.0.0.1:10000/compliments/messages/', 
    { 
     message_body: message, 
     deleted: false, 
     id: t_id 
    }, 
    { 
     headers: { 
      'Content-type': 'application/json' 
     } 
    }).success(function(response) { 
     console.log("ok"); 
    }).error(function(response) { 
     console.log("error"); 
     console.log(response.data); 
    }); 
} 
}); 

而在你的html文件中，包含ng-click函數的最後一個div在你的ng-controller div之外。正確的方法是

<div class="form-group" ng-controller="createMessage"> 
    <label class="control-label" for="selectTeacher">To</label> 
    <select class="form-control" id="selecT" ng-model="chosen.teacher" ng-options="teacher.name for teacher in teachers track by teacher.id" required> 
    </select> 
    <textarea class="form-control" id="message" cols="auto" rows="10" ng-model="note" placeholder="Write your message" required></textarea> 
    <div> 
    <button type="submit" class="form-control" id="subBtn" ng-click="postData(note, chosen.teacher.id)">Post</button> 
    </div> 
    </div> 

Answer 2

好吧，這裏是我的解決方案：

var app = angular.module('info', []) 

app.controller('createMessage', function($scope, $http) { 
    $scope.teachers = []; 
    $scope.chosen = {}; 
    $http.get('http://127.0.0.1:10000/compliments/teachers/'). 
     then(function(response) { 
      $scope.teachers = response.data; 
     }); 
    $scope.chosen.teacher = { id : 5, name : 'Dr. Ananya Kanjilal'}; 
    $scope.postData = function() { 
    $http({ 
      url: 'http://127.0.0.1:10000/compliments/messages/', 
      method: 'POST', 
      data: JSON.stringify({ 
       "message_body": $scope.note, 
       "deleted": false, 
       "teacher_id": $scope.chosen.teacher.id 
      }), 
      config: { 
       headers: 
        { 
         'Content-type': 'application/json' 
       } 
      } 
     }).success(function(response) { 
      console.log("ok"); 
     }).error(function(response) { 
      console.log("error"); 
      console.log(response.data); 
     }); 
    } 
}); 

我省略了JSON.stringify（早期），並且是類型錯誤