Как отправить железо через ajax в Polymer 3 - PullRequest
Новая
       31

Как отправить железо через ajax в Polymer 3

0 голосов
/ 23 сентября 2018

Проблема

Я хочу отправить железную форму в Polymer 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, но я хочу использовать кнопку бумаги.

Любая помощь высоко ценится.Спасибо!

1 Ответ

0 голосов
/ 24 сентября 2018

Я попытался отправить форму с this.$.formOne.submit().Это тоже сработало.Конечно, форма не была отправлена ​​через ajax, но страница API была открыта.

Проблема в том, что вы неправильно звоните <form>.submit() (выполняется синхронный submitметод нативный <form>) вместо <iron-form>.submit().Чтобы решить эту проблему, переместите идентификатор в <iron-form>, который будет выполнять предполагаемый асинхронный метод submit: 

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

demo

...