将聚合物形式数据传递给rest api

Question

我正在寻找某种方法将数据从 Polymer 表单字段传递到 REST API， 实际上，我正在使用 core-ajax 来执行此操作，但我认为执行此操作的方法有点繁重。

有什么标准的方法吗？

这是我的代码：

<template>
<section>
    <file-input class="blue" id="file" extensions='[ "xls" ]' maxFiles="1">{{ FileInputLabel }}</file-input>
</section>
<section>
    <paper-button raised class="blue" disabled?="{{ (! Validated) || (Submitted) }}" on-tap="{{ Submit }}">
    <core-icon icon="send"></core-icon> 
             Process
    </paper-button>
</section>

<paper-toast id="toast" text=""></paper-toast>

<core-ajax id="ajax" url="/import-pdi" method="POST" handleAs="json" response="{{ response }}" on-core-complete="{{ SubmitFinished }}"></core-ajax>
</template>

    <script>
        Polymer("import-pdi-form", {

            Validated: false,
            Submitted: false,

            FileInputLabel: "SELECT",
            ready: function () {
                this.shadowRoot.querySelector("#file").addEventListener("change", function(event) {
                    var container = document.querySelector("import-pdi-form");
                    container.Validated = (event.detail.valid.length != 0);
                    if (event.detail.valid.length == 0) {
                        container.shadowRoot.querySelector("#toast").text = "Invalid Format";
                        container.shadowRoot.querySelector("#toast").show();
                        container.FileInputLabel = "SELECCIONA L'ARXIU";
                    }
                    else {
                        container.FileInputLabel = event.detail.valid[0].name;
                        var form_data = new FormData();
                        form_data.append("file", event.detail.valid[0], event.detail.valid[0].name);
                        container.shadowRoot.querySelector("#ajax").body = form_data;
                        container.shadowRoot.querySelector("#ajax").contentType = null;
                    }
                });
            },
            Submit: function() {
                if ((this.Validated) && (! this.Submitted)) {
                    this.Submitted = true;
                    this.shadowRoot.querySelector("#ajax").go();
                }
            },
            SubmitFinished: function(event, detail, sender) {
                if (detail.xhr.status == 200) {
                    this.shadowRoot.querySelector("#toast").text = JSON.parse(detail.xhr.response).message;
                }
                else {
                    this.shadowRoot.querySelector("#toast").text = "Server Error";
                }
                this.shadowRoot.querySelector("#toast").show();
                this.FileInputLabel = "SELECCIONA L'ARXIU";
                this.shadowRoot.querySelector("#file").reset();
                this.Submitted = false;
            }
        });
     </script>

Answer 1

对于提交包含自定义元素的表单，我们目前建议您使用ajax-form element。看起来您可能已经在使用同一作者的 file-input 元素，因此两者应该可以很好地协同工作。