javascript - AngularJS POSTs empty requests? - Stack Overflow

admin管理员组

文章数量:1410674

I'm a newbie in AngularJS and I've faced an issue when I try to make a POST request with AngularJS and it POSTs no parameters with it. I use Sinatra as a RESTful interface.

That's how my Sinatra backend looks:

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

If try to POST with Postman chrome extension - it works! Sinatra saves the content properly. So I'm sure that the backend works as it should.

That's how my angular test code looks:

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()

And HTML-code:

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

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

So, the only question is: What's wrong? Why I can make correct request with Postman but not with angularJS? Angular returns empty "content" so Sinatra saves it as "" every time.

I've also attached a structure of a layer:

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

---

How can I log what exactly angular POSTs?

I'm a newbie in AngularJS and I've faced an issue when I try to make a POST request with AngularJS and it POSTs no parameters with it. I use Sinatra as a RESTful interface.

That's how my Sinatra backend looks:

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

If try to POST with Postman chrome extension - it works! Sinatra saves the content properly. So I'm sure that the backend works as it should.

That's how my angular test code looks:

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()

And HTML-code:

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

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

So, the only question is: What's wrong? Why I can make correct request with Postman but not with angularJS? Angular returns empty "content" so Sinatra saves it as "" every time.

I've also attached a structure of a layer:

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

---

How can I log what exactly angular POSTs?

• javascript
• post
• angularjs
• coffeescript
• sinatra

Share Follow edited Aug 14, 2013 at 10:25 artem_golovin asked Aug 14, 2013 at 9:53 artem_golovinartem_golovin 15422 silver badges1515 bronze badges 7

• Can you try $save without parameters.Since you already have the object. – Chandermani Commented Aug 14, 2013 at 10:02
• tried. It sends request to /layer/ instead of /layer/:layerId so Sinatra gives us a error. But I tried to slightly change the controller so it posts with empty save() and to the right address. But it still POSTs empty request... How can I log what exactly angular POSTs? – artem_golovin Commented Aug 14, 2013 at 10:03
• See the object $scope.layer and see if it has property layer_id and it is set to correct value inside debugger. And also verify there are other properties available on layer and try the method $save without parameters. – Chandermani Commented Aug 14, 2013 at 10:10
• I changed the controller in a way that is saves with empty save(). Like that: jsfiddle/mwGs3 But still no result... I've checked in the logs that it posts to the right address. – artem_golovin Commented Aug 14, 2013 at 10:14
• Can you put the structure of the layer object in the question. The layer object should have a property layer_id? – Chandermani Commented Aug 14, 2013 at 10:20

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

Hey this is the exact problem I was having, and the answer now seems so obvious. I knew Angular was sending json, but no matter what I tried it wasn't working. This led me in the right direction, but as for parsing json I had to write

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

I had to change 'string' to 'read'. Maybe I have a newer version of the json gem or something. My full save process is like this:

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

I use rabl to format the json to have control over what json data Sinatra sends back (no emails or passwords please)

My Angular code is just this (have not yet implemented put, patch or delete, nor auto update of data just yet. You still have to refresh the page to see the new post.) And to be clear, I have a table named 'foos', where the ActiveRecord model is 'Foo', and one column named 'anything' (other than timestamps and id, which I make sure are always there).

// 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);
    });
  };
});

Then in my markup the form looks like this, where the important thing is the call to 'create' with 'anything' as the argument in 'ng-submit'. If you have more than one column in your table you call 'create' with more than one argument ex. 'create(anything, bar)'.

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

While displaying the data is

<li ng-repeat="foo in foos">
  <p>{{foo.anything}}</p>
</li>

This link solved the problem. Just add

gem 'rack-parser'

to your Gemfile and add this code to config.ru. Will work like a charm.

require 'rack/parser'
use Rack::Parser, content_types: {
  'application/json' => Proc.new {|body| JSON.parse body }
}

All right, I've solved the issue. Somehow Sinatra was not properly getting POSTs from Angular and was not automatically putting them into params. So if we parse the request manually - it works. Like that:

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 

本文标签： javascriptAngularJS POSTs empty requestsStack Overflow