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

Question

问题

我想在 Polymer 3 中提交一个 iron-form。我使用的是 paper-button，并且必须通过 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

I tried submitting the form with this.$.formOne.submit(). That worked, too. Of course the form wasn't submitted via ajax but the api page was opened.

问题是您错误地调用了 <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>

demo

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

How to submit iron-form via ajax in Polymer 3

polymer

web-component

polymer-3.x

iron-ajax

iron-form

问题

我试过的