如何通过纸张按钮点击触发iron-ajax请求？
[英]How to trigger a iron-ajax request on a paper-button click?
问题描述
I would like <iron-ajax> to POST dynamic data from a <textarea> to http://example.net when I click a <paper-button> element: 
我想<iron-ajax>到POST从动态数据<textarea>到http://example.net当我点击一个<paper-button>元素：
function get_data() { return {content:document.getElementById("mycontent").html()} }
<html> <head> <!-- Imports--> </head> <body> <iron-ajax url="//example.net" ></iron-ajax> <paper-button id="mybutton"></paper-button> <textarea id="mycontent"></textarea> </body> </html>
How can I combine the iron-ajax and paper-button elements to send the data to the server? 如何组合iron-ajax和paper-button元素将数据发送到服务器？
3 个解决方案
解决方案1
7 已采纳 2015-10-26 13:30:54
You need to wrap your polymer elements in a tag that will register as polymer element. 您需要将聚合物元素包裹在将注册为聚合物元素的标签中。 You can use dom-bind in your case. 你可以在你的情况下使用dom-bind 。
<template id="t" is="dom-bind">
<textarea value="{{dataToPost::input}}"></textarea>
<paper-button on-tap="postData">Post Data</paper-button>
<iron-ajax
id="dataAjax"
method="post"
url="data/url"
on-response="postComplete"></iron-ajax>
</template>
In the script you need to call generateReqeust on iron-ajax element. 在脚本中，您需要在iron-ajax元素上调用generateReqeust 。
(function (document) {
'use strict';
document.addEventListener('WebComponentsReady', function() {
// We have to bind the template with the model
var t = document.querySelector('#t');
var ajaxRequest = t.$.dataAjax;
// make the iron-ajax call
t.postData = function() {
ajaxRequest.body = {
'text': t.dataToPost;
}
ajaxRequest.generateRequest();
}
//callback on request complete
t.postComplete = function(){
alert('whoa! request complete');
}
});
})(document);
Working plunker for GET : http://plnkr.co/edit/13QJ7QFETIBg4bEiCMS7?p=preview GET工作人员： http ：//plnkr.co/edit/13QJ7QFETIBg4bEiCMS7？p =preview
解决方案2
1 2017-05-26 19:25:18
The simplest and least expensive way is to just query the iron ajax element and call the method generateRequest() 最简单和最便宜的方法是只查询iron ajax元素并调用方法generateRequest()
Place this in your on-tap handler for paper-button... 把它放在你on-tap处理器上，用于纸质按钮......
Polymer.dom(this.root).querySelector('iron-ajax').generateRequest()
解决方案3
0 2015-10-26 13:43:21
If you are keen on not using a <template is="dom-bind"> (it would make it a lot easier though), you can go the plain vanilla route (ie no dom-bind). 如果你热衷于不使用<template is="dom-bind"> （它会使它变得更容易），你可以使用普通的vanilla路径（即没有dom-bind）。
<html> <head> <!-- Imports--> </head> <body> <iron-ajax url="//example.net"></iron-ajax> <paper-button id="mybutton"></paper-button> <textarea id="mycontent"></textarea> <script> window.addEventListener('WebComponentsReady', function() { var ironAjax = document.querySelector('iron-ajax'); ironAjax.method = 'post'; ironAjax.contentType = 'text/plain'; // you're just sending text var myButton = document.getElementById('mybutton'); var myContent = document.getElementById('mycontent'); myButton.addEventListener('tap', function(e) { var valueToSend = myContent.value; ironAjax.body = valueToSend; ironAjax.generateRequest(); }); }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.