Polymer - Iron Ajax
<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 − 您将 URL 放置在该属性中 API 端点。
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.html
