如何從鐵形式的Polymer 1請求中獲得響應

Question

我試圖從iron-form in Polymer 1的iron-form in Polymer 1得到響應。

表單提交調用一個PHP腳本，它返回HTML代碼插入div （ ul和一些li ）。

我使用iron-form事件“ iron-form-response ”，但我不知道如何得到響應。

我可以在瀏覽器開發人員工具的網絡選項卡中看到響應，但不知道如何在我的元素中獲取它。

我沒有在網上找到iron-form文檔中的怎么做。

有誰可以幫助我嗎 ？

Answer 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>

就是這樣。 沒什么復雜的。 不要過於復雜。

Answer 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);
}

Answer 3

我要建立Talon的答案，這是正確的。

假設從服務器發送的響應是JSON格式， e.detail將是一個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"}

Answer 4

小更新。 我發送一些帶有響應res.contentType('json'); es.status(500).send({"foo":"bar"}); ： res.contentType('json'); es.status(500).send({"foo":"bar"}); res.contentType('json'); es.status(500).send({"foo":"bar"}); 如果我使用500（錯誤），我只能通過console.log(e.detail.request.xhr.response);訪問json數據console.log(e.detail.request.xhr.response); 在代碼200的情況下，它通過以下方式到達： console.log(e.detail.response); 我不明白為什么會這樣，但這對我來說是唯一的方式（（

Answer 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>