如何在Polymer 3中通过Ajax提交铁形式

Question

问题

我想在聚合物3中提交铁表格。我使用纸质按钮，并且该表格必须通过Iron-ajax提交。

这是我的view.js

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';

class Foo extends PolymerElement {
    static get template() {
        return html'
            <iron-form>
                <form id="formOne" method="post" action="https://my-api-url.com" is="iron-form">
                    <paper-input name="input-1" placeholder="Input One"></paper-input>
                    <paper-button on-tap="submitHandler">Submit</paper-button>
                </form>
            </iron-form>
        ';
    }

    submitHandler() {
        this.$.formOne.generateRequest();
    }
}
window.customElements.define('foo', Foo);

单击纸张按钮时，我的表单未提交。

我尝试了什么

• 我手动创建了一个Iron-ajax元素，并使用generateRequest()进行了请求。 那行得通。
• 我在submitHandler函数中发出了警报。 已显示。
• 我尝试使用this.$.formOne.submit()提交表单。 这也起作用。 当然，表单不是通过ajax提交的，但是api页面已打开。
• 我创建了一个普通的<button>来提交表单。 这可以正常工作，并且也可以通过ajax发送表单，但是我想使用纸张按钮。

非常感谢您的帮助。 谢谢！

Answer 1

我尝试使用this.$.formOne.submit()提交表单。 这也起作用。 当然，表单不是通过ajax提交的，但是api页面已打开。

问题是您错误地调用了<form>.submit() （执行本机<form>的同步submit方法）而不是<iron-form>.submit() 。 要解决此问题，请将ID移到<iron-form> ，它将执行预期的异步submit方法：

<iron-form id="formOne">
  <!-- <form id="formOne"> --> <!-- DON'T DO THIS -->
  <form>...</form>
</iron-form>

演示