iron-ajax sends encoded request

Question

Upon form submission, i am trying to send a request to Mandrill API. The send works okay but the request contains junk characters.

Below is my code:

Polymer({
  is: 'landing-page',
  buttonClick: function() {
   this.$.landingPageForm.generateRequest();
  } 
/*

Upon click i get below request generated by iron-ajax

Request URL:https://mandrillapp.com/api/1.0/messages/send.json?0=%7B&1=%22&2=k&3=e&4=y&5=%22&6=%3A&7=%22&8=B&9=h&10=-&11=f&12=6&13=p&14=n&15=X&16=Z&17=P&18=w&19=p&20=Z&21=6&22=4&23=6&24=T&25=_&26=F&27=L&28=m&29=A&30=%22&31=%2C&32=%22&33=m&34=e&35=s&36=s&37=a&38=g&39=e&40=%22&41=%3A&42=%22&43=%22&44=f&45=r&46=o&47=m&48=_&49=e&50=m&51=a&52=i&53=l&54=%22&55=%3A&56=%22&57=e&58=x&59=a&60=m&61=p&62=l&63=e&64=%40&65=d&66=o&67=m&68=a&69=i&70=n&71=.&72=c&73=o&74=m&75=%22&76=%2C&77=%0A&78=%09&79=%09&80=%09&81=%09&82=%09&83=%22&84=t&85=o&86=%22&87=%3A&88=%5B&89=%7B&90=%22&91=e&92=m&93=a&94=i&95=l&96=%22&97=%3A&98=%22&99=r&100=e&101=c&102=i&103=p&104=i&105=e&106=n&107=t&108=%40&109=d&110=o&111=m&112=a&113=i&114=n&115=.&116=c&117=o&118=m&119=%22&120=%7D&121=%5D&122=%2C&123=%0A&124=%09&125=%09&126=%09&127=%09&128=%09&129=%22&130=s&131=u&132=b&133=j&134=e&135=c&136=t&137=%22&138=%3A&139=%20&140=%22&141=S&142=u&143=b&144=j&145=e&146=c&147=t&148=%20&149=l&150=i&151=n&152=e&153=%22&154=%2C&155=%0A&156=%09&157=%09&158=%09&159=%09&160=%09&161=%22&162=t&163=e&164=x&165=t&166=%22&167=%3A&168=%20&169=%22&170=t&171=e&172=x&173=t&174=%20&175=i&176=n&177=%20&178=t&179=h&180=e&181=%20&182=m&183=e&184=s&185=s&186=a&187=g&188=e&189=%22&190=%22&191=%7D

Response from server:

code: -2
message: "Validation error: {"message":"Please enter an array"}"
name: "ValidationError"
status: "error"

*/

THis is in my template:

<form is="iron-form" id="formPost" method="post" action="/"> 
      <paper-input name="email" id="email" label="Email Address" value="{{email}}"required></paper-input>
     </br> 
      <paper-button  type="submit" name="submit" raised on-click="buttonClick">Notify Me!</paper-button>
     
</form>
<iron-ajax
    contentType: "application/json"  
    headers='{"Content-Type": "application/json;charset=utf-8"}'    
    id="landingPageForm" 
    url="https://mandrillapp.com/api/1.0/messages/send.json" 
    method="POST"
    params='{"key":"2342sdfsdf","message":""from_email":"[email protected]",
     "to":[{"email":"[email protected]"}],
     "subject": "Subject line",
     "text": "text in the message""}'
     handle-as="json"
   >  
  </iron-ajax>

I am using following sample to send email through javascript using Mandrill API https://medium.com/@mariusc23/send-an-email-using-only-javascript-b53319616782

It does work good when i use jquery ajax.

Answer 1

When I run that params JSON through a JSON validator it points out a few issues:

Parse error on line 3:
...",    "message": ""from_email":"example
----------------------^
Expecting '}', ':', ',', ']'

Parse error on line 3:
...ssage": "from_email": "[email protected]
-----------------------^
Expecting '}', ',', ']'

Additionally, it looks like the Mandrill API expects the POST JSON in the body rather than the querystring. Change params to body to remedy this.

<iron-ajax
  headers='{"Content-Type": "application/json;charset=utf-8"}'              
  id="landingPageForm" 
  url="https://mandrillapp.com/api/1.0/messages/send.json" 
  method="POST"
  handle-as="json"
  body='{
    "key": "YOUR API KEY HERE",
    "message": {
      "from_email": "[email protected]",
      "to": [
          {
            "email": "[email protected]",
            "name": "RECIPIENT NAME (OPTIONAL)",
            "type": "to"
          },
          {
            "email": "[email protected]",
            "name": "ANOTHER RECIPIENT NAME (OPTIONAL)",
            "type": "to"
          }
        ],
      "autotext": "true",
      "subject": "YOUR SUBJECT HERE!",
      "html": "YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!"
    }
  }'></iron-ajax>

The above should work as a drop-in replacement, just validate any changes to the JSON body with something like http://jsonlint.com/

Answer 2

As Zikes wrote above you have to make sure that you are sending it with "POST" method and put all the JSON inside code.

There might be one thing still needed here: JSON.stringify(), here is my code that solves the problem + allows for dynamic fields:

        <iron-ajax
        url="https://mandrillapp.com/api/1.0/messages/send.json"
        headers='{"Content-Type": "application/json;charset=utf-8"}' 
        handle-as="json"
        method="POST"
        body='{{ajaxParams}}';></iron-ajax>

<script>
    Polymer({
        is: 'contact-form',
        properties: {
            name: { type:String,    notify: true    },//bind it to <iron-input> fields
            email: {    type:String,    notify: true    },
            msg: {  type:String,    notify: true    },
            ajaxParams: {
                type: String,
                computed: 'processParams(name,email,msg)'
            }
        },
        processParams: function(name,email,msg) {
                    var resp = {
                            "key": "mandrill-api-key",
                            "message": {
                                "from_email": email,
                                "from_name": name,
                                "headers": {
                                    "Reply-To": email
                                },
                                "subject": "subject",
                                "text": msg,
                                "to": [
                                    {
                                        "email": "[email protected]",
                                        "name": "email name",
                                        "type": "to"
                                    }
                                ]
                            }
                        };
                    return JSON.stringify(resp);

        }
     });
</script>

That is it. Hope this helps someone.