聚合物鐵ajax POST方法不起作用

Question

我正在學習聚合物。我無法使用<iron-ajax>來計算代碼以「發佈」。我使用的是在線檢測的API（https://reqres.in/），我應該得到這個響應回來狀態碼200：

{"token": "QpwL5tke4Pnpja7X"}". 

我無法找到一個教程顯示POST例子。我一直在網上搜索過去的24小時，但一切都是關於GET，而不是。

如果任何熟悉<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的屬性應該是這樣的開始標記：

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

• 你可能打算將handleResponse財產<iron-ajax>.lastResponse，其中包含對AJAX請求的響應綁定。

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

  注意的<p>{{handleResponse}}</p>的結合將使得響應對象作爲[object Object]。如果你想看到的響應內容，你必須使用一個computed binding返回一個字符串（例如，JSON.stringify()）是這樣的：

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

• 的<iron-ajax>.body屬性值應該是單引號像這樣：

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

完整的例子應該是這個樣子：

<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