Javascript 如何使用Angular JS获得POST请求的响应?

Javascript 如何使用Angular JS获得POST请求的响应?,javascript,angularjs,node.js,post,asynchronous,Javascript,Angularjs,Node.js,Post,Asynchronous,我使用node、express、mongoose作为后端,angular js作为前端。我正在用表格发送一个post请求 <div class="alert alert-success" ng-show="success"> {{success}} </div> <div class="alert alert-danger" ng-show="error"> {{error}} </div> <form id="newCate

我使用node、express、mongoose作为后端,angular js作为前端。我正在用表格发送一个post请求

<div class="alert alert-success" ng-show="success">
  {{success}}
</div>

<div class="alert alert-danger" ng-show="error">
  {{error}}
</div>

  <form id="newCategory" ng-submit="submit()">
    <div class="row">
      <div class="col-md-4">
        {{mySubmit}}
        <div class="form-group">
          <input id="name" name="name" type="text"
            placeholder="Name" class="form-control input-md"
            ng-model="catName">
        </div><!-- ./form-group -->

      </div><!-- ./col -->

      <div class="form-group">
       <input type="submit" name="submit" value="submit" class="btn btn-primary">
      </div><!-- ./form-group -->

    </div><!-- ./row -->
  </form>
结果什么都没有,我不知道我哪里做错了!这项服务运行良好,事实上,我可以控制台日志的结果,但我无法设置它的范围

(function() {
  let fetchModule = angular.module('fetchModule', []);

  /**
   * A Service for Requests.
   */
  fetchModule.service('Request', ['$http', function($http) {
    /**
     * Get's content of a specific URL.
     * @param {String} url - URL to GET.
     * @return {Promise} Promise resolves with contents or rejects with an error.
     */
    this.get = function(url) {
      // Promise
      return new Promise((resolve, reject) => {
        $http.get(url)
          .success(result => {
            resolve(result);
          })
          .error((err, status) => {
            reject(err);
          });
      });
    };

/**
 * Get's content of a specific URL.
 * @param {String} url - URL to GET.
 * @param {String} data - Data to post.
 * @return {Promise} Promise resolves with contents or rejects with an error.
 */
this.post = function(url, data) {
  // Promise
  return new Promise((resolve, reject) => {
    $http.post(url, data)
      .success((data, status, headers, config) => {
        resolve(data);
      })
      .error((data, status, headers, config) => {
        resolve(status);
      });
  });
};

请帮助我,我只是一个有角度的初学者。

您在
Promise
中使用了反模式包装
$http
,因为
$http
本身会返回一个Promise

此外,由于global
Promise
不属于角度上下文,因此每当它更改范围时,需要通知angular运行摘要以更新视图。使用角度承诺,情况并非如此

更改
请求。发布
至:

this.post = function(url, data) {  
  return $http.post(url, data);
};
在控制器中,有一个细微的区别,即返回的对象将来自服务器的数据保存在属性
data

$scope.submit = function() {
    Request.post('/category', { name  : $scope.catName })
      .then(function(resp) {
        $scope.success = resp.data.msg;
      })
      .catch(function(err) {
        $scope.error = "Error: " + err.status;
      });
    return false;
  };

请注意,
$http
方法
.success()
.error()
已被弃用

您在
Promise
中使用反模式包装
$http
,因为
$http
本身返回一个承诺

    scope.submit = function() {
    $http({
      url:'/category', 
      method:'POST'
      data:{ name  : $scope.catName },
      headers: {'Content-Type': 'application/json'},
     })
      .then(function(resp) {
        $scope.success = resp.data.msg;
      },function(error){
        $scope.error = "Error: " + err.status;}
      )};
此外,由于global
Promise
不属于角度上下文,因此每当它更改范围时,需要通知angular运行摘要以更新视图。使用角度承诺,情况并非如此

更改
请求。发布
至:

this.post = function(url, data) {  
  return $http.post(url, data);
};
在控制器中,有一个细微的区别,即返回的对象将来自服务器的数据保存在属性
data

$scope.submit = function() {
    Request.post('/category', { name  : $scope.catName })
      .then(function(resp) {
        $scope.success = resp.data.msg;
      })
      .catch(function(err) {
        $scope.error = "Error: " + err.status;
      });
    return false;
  };
请注意,
$http
方法
.success()
.error()
已被弃用

    scope.submit = function() {
    $http({
      url:'/category', 
      method:'POST'
      data:{ name  : $scope.catName },
      headers: {'Content-Type': 'application/json'},
     })
      .then(function(resp) {
        $scope.success = resp.data.msg;
      },function(error){
        $scope.error = "Error: " + err.status;}
      )};
不要返回false,因为它是一个回调函数。不要使用catch块,而是使用上面提到的“功能块”

我已经改进了解决方案。如果它能工作,你能重构它,将重用的代码转移到你的服务中吗。不要错过在控制器中注入$http

不要返回false,因为它是一个回调函数。不要使用catch块,而是使用上面提到的“功能块”



我已经改进了解决方案。如果它能工作,你能重构它,将重用的代码转移到你的服务中吗。不要错过在控制器中注入$http。

Success方法的回调有数据,这不是你想要的吗?是的!到目前为止没有问题,但是我无法在alertcan you console.log(data.message)和check(而不是data.msg)上看到结果。这是数据对象console.log
object{msg:“Created new category”}
,data.message console.log返回
未定义的
明白了。某些响应具有data.message格式。因此我认为这可能是打字错误。Success方法的回调包含数据,这不是您想要的吗?是的!到目前为止没有问题,但是我无法在alertcan you console.log(data.message)和check(而不是data.msg)上看到结果。这是数据对象console.log
object{msg:“Created new category”}
,data.message console.log返回
未定义的
明白了。某些响应具有data.message格式。所以我认为这可能是打字错误。你的答案似乎合理,但不起作用,兄弟!如果有帮助的话,我使用1.3.9。正如您所说,我更改了代码,只返回了http.post(),并使用了.then,catch和.success和error,但没有运气!现在我甚至已经取消了该服务,并再次执行$http直接输出相同的输出console.log对scope有效不起作用
then()
catch()
中的哪一个被触发了?在它们上面都放一个console.log,
。然后
被触发应该工作…假设
resp.data.msg
是正确的属性,并且表单在正确的控制器范围内,您的答案似乎合理,但不工作,兄弟!如果有帮助的话,我使用1.3.9。正如您所说,我更改了代码,只返回了http.post(),并使用了.then,catch和.success和error,但没有运气!现在我甚至已经取消了该服务,并再次执行$http直接输出相同的输出console.log对scope有效不起作用
then()
catch()
中的哪一个被触发了?在它们上面都放一个console.log,
.then
正在被触发应该工作…假设
resp.data.msg
是正确的属性并且表单在正确的控制器范围内我已经改进了我的答案,也尝试一下@JohnfooI已经改进了我的答案,也尝试一下@Johnfoo