Polymer Eisen-Ajax POST-Methode funktioniert nicht

Question

Ich lerne Polymer. Ich kann den Code nicht mit <iron-ajax> "posten". Ich bin mit einem Online-Test-API (https://reqres.in/), und ich soll diese Antwort zurück mit dem Statuscode 200 erhalten:

{"token": "QpwL5tke4Pnpja7X"}". 

ich kein Tutorial ein POST Beispiel zu zeigen, finden konnte. Ich habe online für die letzten 24 Stunden gesucht, aber alles ist über GET und nicht POST.

Wenn jemand, der mit <iron-ajax> vertraut ist, meinen Code überprüfen und mir helfen könnte, es zu arbeiten oder herauszufinden, wie man den korrekten Code schreibt, würde es sehr hilfreich für einen Anfänger wie mich sein.

1. Ist mein Code richtig mit der body Eigenschaft?

2. Ist die Antwort der 200 Statuscode oder das Token?

   <!-- 
   @license 
   Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 
   This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
   The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
   The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
   Code distributed by Google as part of the polymer project is also 
   subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
   --> 
   
   <link rel="import" href="../bower_components/polymer/polymer-element.html"> 
   <link rel="import" href="shared-styles.html"> 
   <link rel="import" href="../bower_components/polymer/polymer.html"> 
   <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 
   
   <dom-module id="my-view2"> 
       <!--test using this data: { 
        "email": "peter@klaven", 
        "password": "cityslicka" 
       }--> 
       <template> 
       <iron-ajax> 
        auto 
        method="post" 
        url="https://reqres.in/api/login" 
        handle-as="json" 
        content-type="application/json" 
        body =[{"email": "peter@klaven", "password": "cityslicka"}] 
        on-response={{handleResponse}} 
   
       </iron-ajax> 
   
       <!--Handle response--> 
       <p> response handling code goes here, how to show the response from the server here?</p> 
       <p> It should show: {"token": "QpwL5tke4Pnpja7X"} </p> 
       <div> 
       <p> {{handleResponse}} </p> 
       </div> 
       </template> 
   
       <script> 
       class MyView2 extends Polymer.Element { 
        static get is() { return 'my-view2'}; 
   
        static get proporties() { 
        return { 
         handleResponse: { 
         type: Object, 
         notify: true, 
         readOnly: true 
         } 
        }; 
        } 
       } 
   
       window.customElements.define(MyView2.is, MyView2); 
       </script> 
   </dom-module> 
   

Answer 1

• Ihre HTML ungültig ist (vielleicht ein Copy-Paste Tippfehler?). Die iron-ajax ‚s Attribute sollten innerhalb der Öffnung Tag wie folgt sein:

  <iron-ajax 
      auto 
      method="post" 
      ... 
  > 
  </iron-ajax> 
  

• Sie wahrscheinlich die handleResponse Eigenschaft auf <iron-ajax>.lastResponse, zu binden, zu verstehen, die die Antwort auf die AJAX-Request enthält.

  <iron-ajax last-response={{handleResponse}} ...> 
  

  anzumerken, dass die Bindung von <p>{{handleResponse}}</p> würde das Antwortobjekt als [object Object] machen. Wenn Sie die Antwortinhalte sehen wollen, haben Sie einen computed binding verwenden, die einen String zurückgibt (zB mit JSON.stringify()) wie folgt aus:

  // <template> 
  <p>json(handleResponse)</p> 
  
  // <script> 
  class XFoo extends Polymer.Element { 
      ... 
      json(obj) { 
      return JSON.stringify(obj); 
      } 
  } 
  

• Der Attributwert von <iron-ajax>.body sein sollte wie folgt in einfachen Anführungszeichen :

  <iron-ajax body='[{"foo": "bar"}]'> 
  

Das vollständige Beispiel soll wie folgt aussehen:

<dom-module id="x-foo"> 
    <template> 
    <iron-ajax 
       auto 
       method="post" 
       url="//httpbin.org/post" 
       body='[{"foo": "{{foo}}"}]' 
       handle-as="json" 
       content-type="application/json" 
       last-response="{{lastResponse}}" 
       > 
    </iron-ajax> 
    <pre>[[json(lastResponse)]]</pre> 
    </template> 
    <script> 
    class XFoo extends Polymer.Element { 
     static get is() { return 'x-foo'; } 

     static get properties() { 
     return { 
      foo: { 
      type: String, 
      value: 'bar' 
      } 
     } 
     } 

     json(obj) { 
     return JSON.stringify(obj, null, 2); 
     } 
    } 
    customElements.define(XFoo.is, XFoo); 
    </script> 
</dom-module> 

demo