如何从铁型聚合物 1 请求中获得响应答案

【问题标题】：How to get response from an iron-form Polymer 1 request如何从铁型聚合物 1 请求中获得响应
【发布时间】：2016-08-11 23:27:21
【问题描述】：

我正在尝试从iron-form in Polymer 1 获得回复。

表单提交调用一个 php 脚本，该脚本返回 HTML 代码以插入 div（ul 和一些 li）。

我使用iron-form 事件“iron-form-response”，但我不知道如何获得响应。

我可以在浏览器开发工具的网络选项卡中看到响应，但不知道如何在我的元素中获取它。

我在iron-form 文档online 中找不到如何操作。

有人可以帮帮我吗？

【问题讨论】：

请发布您的代码，我们将能够更好地帮助您。您可以在bower_components 文件夹中导航到此元素的演示，显示为iron-form-submit 设置事件列表器。由于它已在文档中列出，我想您也可以为 iron-form-response 设置一个列表。
根据文档，我使用侦听器和带有回调函数的 Iron-form-response 事件。我不知道如何在回调函数中获得响应。我会尽快把我的代码。谢谢。
事实上，我想要做的是从表单操作返回一个 html 部分（ ul 和一些 li ），并使用 Iron-form 将此结果插入到我的主页上的 div 标签中，所以阿贾克斯。我正在发现 Polymer 元素，并且正在测试一些东西。我同意我的做法可能不是好方法！使用浏览器开发工具我看到 event.detail 是空的。所以我尝试返回一个 JSON 字符串。在这里， event.detail 返回我想要的。所以我想这就是 Polymer（至少是铁形元素）与 JSON 一起工作的方式。
要导入html，你需要使用Polymer的实用函数importHref。

标签： javascript polymer

【解决方案1】：

发生了什么事，伙计们？当它只是这么简单时，所有这些响应都会让 OP 感到困惑：

您的表格：

<form is="iron-form" on-iron-form-response="responseHandler" action="http://localhost" id="myform">
   <!-- Your form elements -->
</form>

您的脚本：

<script>
   Polymer({
       // Some scripts here.

       // ...now your listener
       responseHandler: function(e) {
          console.log(e.detail.response);
       },                          
   });
</script>

就是这样。没什么复杂的。不要让事情过于复杂。

【讨论】：

这怎么不在文档中？
Polymer 开发发生了很多事情，并且不时发生变化。遗憾的是，文档跟不上所有的变化。
我认为最好与团队确认这是否意味着作为公共 api。它可能会在将来被删除，这就是它不在文档中的原因。但是，如果不是……那是您的绝佳发现！很酷。
对我来说，控制台中的这个打印：listener method responseHandler`未定义`关于如何解决的任何想法？

【解决方案2】：

将事件侦听器添加到铁形态。

ready: function(){
      this.$.myform.addEventListener('iron-form-response',this.formResponse);
      this.$.myform.addEventListener('iron-form-error',this.formError);
}

表单响应函数：

formResponse: function (e){
                    console.log("Server Response: ",e.detail);
}

表单错误函数：

formError: function (e){
                    console.log("Form Error: ",e.detail);
}

【讨论】：

@Talon 对我来说，e.detail 只显示 HTMLElement。除非我们自己创建元素，否则关于将这些侦听器和函数实际放置在何处的信息似乎很少。
如果您希望访问返回的任何内容，请使用 event.detail.response。请务必（在 PHP 页面中）将您的响应包装在 json_encode() 中，尽管

【解决方案3】：

我将根据 Talon 的答案，这是正确的。

e.detail 将是一个 JSON 对象，假设从服务器发送的响应是 JSON 格式。因此，如果您使用的是 Node.JS 和 Express，您可能会收到如下代码：

document.getElementById('my-form').addEventListener('iron-form-response', function (e) {
    console.log('Form :', e.detail);
});

您的服务器代码可能如下所示：

res.status(200).json({'foo': 'bar'});

之后e.detail 将成为对象{"foo": "bar"}

【讨论】：

我已经按照你的建议进行错误处理，但仍然得到 error: Error: The request failed with status code: 500 at iron-request.<anonymous> (http://localhost:3000/bower_components/iron-ajax/iron-request.html:231:32) message: "The request failed with status code: 500" 而不是我的自定义 json

【解决方案4】：

小更新。我发送了一些带有响应的json： res.contentType('json'); es.status(500).send({"foo":"bar"}); 如果我使用 500（错误），我只能通过 console.log(e.detail.request.xhr.response); 访问 json 数据在代码 200 的情况下，通过以下方式到达：console.log(e.detail.response); 我不明白为什么会这样，但这是我唯一的方法（（

【讨论】：

【解决方案5】：

  <script>
    Polymer({
      is: 'rsvp-wedding',
      attached: function() {
        var form = document.querySelector('form');
        form.addEventListener('iron-form-error', function(e) {
          console.log(e.detail.request.status);
        });
      }
    });
  </script>

【讨论】：