Question

我正在尝试将数据发布到rest api，然后在同一页面中显示该数据。这是我添加数据的表单的代码

<div>
<form name="posts">
            <table class="table">

                <tr>
                   <td>
                        <input name="userId" type="text" ng-model="userId"/>

                    </td>

                    <td>
                        <input name="id" type="text" ng-model="id"/>

                    </td>
                </tr>
                <tr>

                    <td>
                        <input type="text" name="title" ng-model="title" />
                     </td>

                    <td>
                        <input type="text" name="body" ng-model="body" />
                   </td>
                </tr>

                <tr>

                    <td>
                        <input type="button" class="btn btn-default" value="Add" ng-click="AddNewPost()" />

                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </form>
</div>

我在这里显示添加的数据

<table>
   <thead>
    <tr>
     <th>UserId</th>
     <th>Id</th>
     <th>Title</th>
     <th>Body</th>
    </tr>
   </thead>
   <tbody >
     <td>{{UserId}}</td>
     <td>{{Id}}</td>
     <td>{{Title}}</td>
     <td>{{Body}}</td>
    </tr>

   </tbody>
  </table>

我使用的控制器方法是

 $scope.AddNewPost = function () {
               var pst = {
                   userId: $scope.userId,
                   id: $scope.id,
                   title: $scope.title,
                   body: $scope.body

               };
               $http({
                 method: 'POST',
                 url:'http://jsonplaceholder.typicode.com/posts/',
                 data: pst,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
              }).success(function(data){
               $scope.UserId=pst.userId;
                    $scope.Id=pst.id;
                    $scope.Title=pst.title;
                    $scope.Body=pst.body;
               });

           }

但它不起作用。我知道之前有关于这个主题的问题，但他们没有帮助我。我是棱角分明的，所以请帮我找出我犯错的地方。

Answer 1

似乎您使用相同的pst变量为范围变量赋值。您必须首先检查console.log pst中是否包含值。你应该做的

假设data返回的表单帖子包含post对象

更改

.success(function(data){
               $scope.UserId=pst.userId;
                    $scope.Id=pst.id;
                    $scope.Title=pst.title;
                    $scope.Body=pst.body;
               });

要

 .success(function(data){
           $scope.UserId=data.post.userId;
                    $scope.Id=data.post.id;
                    $scope.Title=data.post.title;
                    $scope.Body=data.post.body;
               });

我建议您使用ng-repeat中的多个帖子数据 HTML

Answer 2

 $http.post(url, dataObject, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(function(response) {

        //success

      }, function(error) {
      //error
      });

试试这段代码。

为什么post方法不能在angularjs中工作

2 个答案: