Polymer iron-ajax POSTメソッドが動作しない

Question

私はPolymerを学習しています。私は<iron-ajax>を使って "投稿"するコードを理解することができません。私は（https://reqres.in/）オンラインテストのAPIを使用している、と私はステータスコード200とバックこの応答を受け取る必要があります：私はPOST例を示すチュートリアルを見つけることができませんでした

{"token": "QpwL5tke4Pnpja7X"}". 

。私は過去24時間オンラインで検索していますが、すべてGETで、POSTではありません。

<iron-ajax>をよく知っている人であれば、私のコードを見直して正しいコードを書く方法を理解できたら、私のような初心者にとっては非常に役立ちます。

1. 私のコードはbodyプロパティで正しいですか？

2. 応答は200ステータスコードまたはトークンですか？

   <!-- 
   @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

• あなたのHTMLが不正である（おそらく、コピー＆ペーストタイプミス？）。 iron-ajaxの属性は次のように開始タグ内にある必要があります：あなたはおそらくAJAX要求に対する応答が含まれてい<iron-ajax>.lastResponseからhandleResponseプロパティをバインドするためのもの

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

• 。 <p>{{handleResponse}}</p>の結合が[object Object]として応答オブジェクトをレンダリングするであろうこと

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

  注。あなたは、応答の内容を確認したい場合は、（JSON.stringify()と例えば、）文字列を返しますcomputed bindingを使用する必要があります。このような：

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

• <iron-ajax>.bodyの属性値は、次のように単一引用符で囲まなければなりません：

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

  ：

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

完全な例は次のようになります。

demo