聚合物铁-ajax POST方法不起作用-Java 学习之路

我'm learning Polymer. I' m无法使用 <iron-ajax> 将代码计算为"post" . 我正在使用在线测试API（https://reqres.in/），我应该收到状态代码为200的回复：

{"token": "QpwL5tke4Pnpja7X"}".

我找不到显示 POST 示例的教程 . 我一直在网上搜索过去24小时，但一切都是关于 GET 而不是 POST .

如果熟悉 <iron-ajax> 的人可以查看我的代码并帮助我开始工作或弄清楚如何编写正确的代码，那对像我这样的初学者来说非常有帮助 .

我的代码是否正确 body 属性？
响应是 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>

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

回复于 2024-05-12T08:16:58+08:00

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

1 回答

相关问题