2

我是 AngularJS 的新手，当我尝试使用 AngularJS 发出 POST 请求并且它没有用它 POST 参数时，我遇到了一个问题。我使用 Sinatra 作为 RESTful 接口。

这就是我的 Sinatra 后端的外观：

post '/layer/:layer_id' do
  @layer = PageLayer.where(id: params[:layer_id]).first
  @layer.content = params[:content]
  @layer.save
end

如果尝试使用 Postman chrome 扩展 POST - 它可以工作！Sinatra 会正确保存内容。所以我确信后端可以正常工作。

这就是我的角度测试代码的样子：

TestCtrl = ($scope, $routeParams, $http, $resource) ->
    $scope.layer = []

    Layer = $resource('/layer/:id', {id:'@id'})

$scope.layer = Layer.get {id: $routeParams.layerId}, ->
    console.log "Got you!"

$scope.saveContent = ->
    $scope.layer.$save()
    console.log "Saved!"

angular.module('appDirectives', []).directive "test", ->
    return (scope, element, attrs) ->
        element.bind "blur", ->
            console.log("blur!")
            scope.saveContent()

和 HTML 代码：

<div>Content: {{layer.content}}</div>

<div>
    <form>
        <input type="text" test ng-model="layer.content">
    </form>
</div>

所以，唯一的问题是：怎么了？为什么我可以用 Postman 提出正确的请求，但不能用 angularJS？Angular 返回空的“内容”，因此 Sinatra 每次都将其保存为“”。

我还附加了一个层的结构：

g {id: 27245, page_id: 2302, external_id: 26518, original_upload: null…}
content: "dfgdfg"
external_id: 26518
id: 27245
layerNumber: 8
page_id: 2302

如何记录确切的角度帖子？

4

3 回答 3

4

嘿，这正是我遇到的问题，现在答案似乎很明显。我知道 Angular 正在发送 json，但无论我尝试什么，它都无法正常工作。这使我朝着正确的方向前进，但至于解析 json 我必须写

ng_params = JSON.parse(request.body.read)

我不得不将“字符串”更改为“读取”。也许我有更新版本的 json gem 之类的。我的完整保存过程是这样的：

post '/api/v1/test' do
  ng_params = JSON.parse(request.body.read)
  @foo = Foo.new(ng_params)
  if @foo.save
    puts "Page Saved"
    content_type :json
    rabl :foos, format: "json"
  end
end

我使用 rabl 格式化 json 以控制 Sinatra 发回的 json 数据（请不要发送电子邮件或密码）

我的 Angular 代码就是这样（还没有实现 put、patch 或 delete，也没有自动更新数据。你仍然需要刷新页面才能看到新帖子。）为了清楚起见，我有一个名为 ' foos'，其中 ActiveRecord 模型是 'Foo'，还有一个名为 'anything' 的列（时间戳和 id 除外，我确保它们始终存在）。

// app declaration
var app = angular.module("App", ['ngResource']);

// data service
app.factory('Foo', ['$resource', function($resource) {
  return $resource('/api/v1/test/:id', {id: '@id'});
}]);

// the controller
app.controller('Controller', function($scope, Foo) {

  $scope.foos = Foo.query();

  $scope.create = function(anything) {
    Foo.save({anything: anything}, function(foo){
      $scope.foos.push(foo);
    });
  };
});

然后在我的标记中，表单看起来像这样，其中重要的是调用 'create' 并使用 'anything' 作为 'ng-submit' 中的参数。如果您的表中有不止一列，您可以使用多个参数 ex 调用“create”。'创建（任何东西，酒吧）'。

<h3>Add something new</h3>
<form ng-submit="create(anything)">
  <input ng-model="anything" type="text">
  <button type="submit">Do it</button>
</form>

在显示数据时

<li ng-repeat="foo in foos">
  <p>{{foo.anything}}</p>
</li>
于 2013-10-31T21:15:38.483 回答
2

这个链接解决了这个问题。只需添加

宝石“机架解析器”

到您的Gemfile并将此代码添加到config.ru。会像魅力一样工作。

require 'rack/parser'
use Rack::Parser, content_types: {
  'application/json' => Proc.new {|body| JSON.parse body }
}
于 2014-12-18T12:25:21.250 回答
1

好的，我已经解决了这个问题。不知何故，Sinatra 没有正确地从 Angular 获取 POST，也没有自动将它们放入参数中。因此，如果我们手动解析请求 - 它可以工作。像那样：

post '/layer/:layer_id' do
  @updated_layer = JSON.parse(request.body.string)
  @layer = PageLayer.where(id: params[:layer_id]).first
  @layer.content = @updated_layer['content']
  @layer.save 
end
于 2013-08-15T07:57:22.650 回答