聚合物 iron-ajax POST 方法不起作用

Question

我正在学习 Polymer。我无法计算使用<iron-ajax>“发布”的代码。我正在使用在线测试 API (https://reqres.in/)，我应该会收到带有状态码 200 的回复：

{"token": "QpwL5tke4Pnpja7X"}".

我找不到显示POST 示例的教程。过去 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 的属性应该在开始标记内，如下所示：

  <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