Polymer - Iron Ajax

元素对于进行 ajax 调用很有用。

<iron-ajax
   auto url = "https://www.googleapis.com/youtube/v3/search"
   params = '{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
   handle-as = "json"
   on-response = "handleResponse"
   debounce-duration = "500">
</iron-ajax>

将 auto 设为 true 时，当元素的属性 url, params 或 body 发生更改时，元素会发出一个请求。正如您所看到的，组件具有多个可用的属性 -

url - 您在其中放置 API 端点的 URL 的属性。
params - 您可以在其中传递带请求参数的 JSON 的属性。
handle-as - 指定哪些数据必须存储在响应属性中。默认情况下，数据存储为 json 格式。
on-response - 能够告诉 iron-ajax 组件通过何种方法处理响应的属性。

依次更改多个属性会自动使生成的请求变得更加可靠。

您可以在元素上调用 generateRequest 以显式触发请求。

示例

在以下示例中，我们拥有一个从 CDN 使用的组件 iron-ajax 和 paper-input 的链接。

<!DOCTYPE html>
<html>
   <head>
      <title>iron-ajax</title>
      <link rel = "import"
         href = "https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/paper-input/paper-input.html">
      <link rel = "import"
         href = "https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-ajax/iron-ajax.html">
   </head>
	  
   <body>
      <dom-module id = "data-bind">

         <template>
            <paper-input label = "Write something..." id = "input" value = "{{q::input}}"
               autofocus>
            </paper-input>
            <p>You typed: <b>{{q}}</b></p>
            <p>Echo: <b>{{echo}}</b></p>
           
            <iron-ajax auto
               url = "http://dict.leo.org/dictQuery/m-query/conf/ende/query.conf/strlist.json"
               params = "{'q': q}" handle-as = "json" on-response = "_handleResponse"
               debounce-duration = "500">
            </iron-ajax>
         </template>
       
         <script>
            (function () {
               Polymer ({
                  is: 'data-bind', properties: {
                     echo: {
                        type: String, value: 'waiting ...', reflectToAttribute: true
                     }
                  },
                  _handleResponse: function(event, request) {
                     var response = request.response;
                     this.echo = JSON.stringify(response);
                  }
               });
            })();
         </script>
      </dom-module>
    
      <data-bind></data-bind>
   </body>
</html>

输出

要运行应用程序，请导航到您的项目目录并运行以下命令 -

polymer serve

现在打开浏览器并导航到 http://127.0.0.1:8081/。以下将是输出。

polymer_elements.htm

打印页面