Polymer 1.0 iron-ajax not posting data

Question

<dom-module id="my-new-app">
<style>
</style>
<template>

  <iron-ajax
      id="ajax"
      handle-as="json"
      content-type="application/json"
      method="POST"
      body={"user":2,"dob":"2015-06-10","jobs":1,"skills":[],"about":"cool"}
      on-response="hresponse"
      debounce-duration="3000">
  </iron-ajax>
  <button on-click="setajax">Click me</button>
</template>
<script>
Polymer({
  is: "my-new-app",
  setajax: function () {

      this.$.ajax.url="http://127.0.0.1:8000/users/";
    this.$.ajax.generateRequest();
  },
  hresponse: function(request) {
    console.log(request.detail.response);
    console.log(this.$.ajax.lastResponse);
    console.log(this.$.ajax.params);
  }
});
</script>
</dom-module>

This does not post data correctly to the server. Also when i put in a console.log inside the iron-ajax.html file i found out that contentType was still set as application/x-www-form-urlencoded . The documentation says we can specifiy contentype by specifiying contentType = {String} .

Answer 1

You method actually worked for me.

However, the body attribute must be enclosed in quotes (as all attributes should).

You can try using single quotes in your case:

<iron-ajax
  id="ajax"
  handle-as="json"
  content-type="application/json"
  method="POST"
  body='{"user":2,"dob":"2015-06-10","jobs":1,"skills":[],"about":"cool"}'
  on-response="hresponse"
  debounce-duration="3000">

Answer 2

In 0.5 I know there was always a problem with the core-ajax not sending body objects correctly. The work around I've been using is to stringify the body.

 setajax: function(){
    ajax.body = JSON.stringify({
        "user": 2,
        "dob": "2015-06-10",
        "jobs": 1,
        "skills": [],
        "about": "cool"
    })
    ajax.generateRequest()
  }

Answer 3

the iron-ajax body use raw data so if you want you can use the same function that used internally in the iron-ajax for parameters to generate POST query string parameters like this:

var Util = {
    getQueryString: function (params) {
        var queryParts = [];
        var param;
        var value;

        for (param in params) {
            value = params[param];
            param = window.encodeURIComponent(param);

            if (value !== null) {
                param += '=' + window.encodeURIComponent(value);
            }

            queryParts.push(param);
        }

        return queryParts.join('&');
    }
};

and then you can use it like this:

this.$.ajax.body = Util.getQueryString({
        "user": 2,
        "dob": "2015-06-10",
        "jobs": 1,
        "skills": [],
        "about": "cool"
    });

also you can use computed property and generate this query string

Answer 4

The way you are setting the body attribute is not correct.

body={"user":2,"dob":"2015-06-10","jobs":1,"skills":[],"about":"cool"}

This is not a valid Polymer data binding expression.

You should have a property in your element and use a correct binding expression, like:

body="{{myBodyProperty}}"

...
properties:{
 myBodyProperty:{
  type:Object,
  value:{foo:"bar"}
 }
}

If you set the correct content-type, then the body will be correctly sent as json.