polymer - PolymerフォームをPHPに送信してレスポンスを表示する方法

Question

Polymer 1.0 を使用して、簡単な連絡フォームを送信するための鉄のフォームをセットアップしました。アイデアは、PHP を使用してフォームをデータベース テーブルに送信し、PHP 側からの応答を更新せずにブラウザーに表示することです (典型的な AJAX)。しかし、私はPolymer環境に夢中になっています-これを行う正しい方法があるはずですが、何時間もの検索と調整は実りがありませんでした.

このプロジェクトは、スクリプト (app.js) を使用してイベント リスナーなどを追加する Polymer Starter Kit (lite) を使用して開始しました。これまでのところ、私はその機能を壊していませんが、ドキュメンテーションのすべての例はこのようにはしていません.

これが私がこれまでに得たものです。あなたが提供できるアドバイスをありがとう。

index.html

<!-- this is where the output should be displayed -->
<div id="output"></div>

<!-- this is the web form -->
<form is="iron-form" id="contactus-form" method="post" action="/">
<input type="hidden" name="action" value="contactus-form">
<paper-input id="contactus-field-Name" name="Name" label="Name" value="test"></paper-input>
<paper-button onclick="submitHandler(event)">Send</paper-button>
</form>

...

<script src="script/app.js"></script>
<script>
function submitHandler(event) {
    Polymer.dom(event).localTarget.parentElement.submit();
    }
</script>

app.js

(function(document) {
  'use strict';

  addEventListener('iron-form-submit', function(e) {

    // this works and displays the POSTed values in the browser
    document.querySelector('#output').innerHTML = JSON.stringify(e.detail);

    // I'm looking for a way to first submit this data through PHP and 
    // display the output of that process in the #output div rather than the 
    // raw form input itself.

    }
})(document);

失敗した方法 1

以下に示すように、 index.htmlにiron-ajax要素を追加し、app.jsから参照してみました。残念ながら、イベント リスナーを追加しようとすると、アプリ全体がクラッシュします。同じ方法でイベントリスナーを追加する app.js には他にも多くの部分があるため、奇妙に思えます。

index.html

<iron-ajax id="contactus-output" url="/form/contact.php" params="" handle-as="json"></iron-ajax>
<!-- same form as before goes here -->

app.js

var coutput = document.querySelector('#contactus-output');
coutput.addEventListener('response', function() {
    // nothing fancy here yet, just trying to see if I can do this
    document.querySelector('#output').innerHTML = 'hello world';
    }

失敗した方法 2

SOでThis Answerを見つけて、iron-form-responseイベントを試すことにしました。私が今受け取った出力は です[object HTMLElement]。これは少なくとも何かですが、実際に機能しているかどうかはわかりません。

他のすべては同じままで、フォームのターゲットをphpスクリプトを指すように変更し、app.jsにあるものを次のものに置き換えました。

app.js

addEventListener('iron-form-response', function(e) {
  document.querySelector('#output').innerHTML = e.detail;
});

私は近づいていますか？

あきらめない

上記の 2 番目の失敗した方法を使用すると、'iron-form-response' イベントをリッスンすると、イベントが発生するため、iron-form がリクエストを行っているように見えます。

ただし、返される唯一のことは、[object HTMLElement]それをどうするかわかりません。そのプロパティのいくつかを吐き出そうとしました (developer.mozilla.org で文書化されている - .title、.properties、.styleなど) が、それらは空に見えます。iron-form は本当に HTMLElement オブジェクトを返しますか、それとも間違いですか? フォームを送信しているPHPスクリプトから、通常のXMLHttpRequest. 鉄の形がこれを何らかの形で物体に圧縮した場合、それを再び引き出す方法はありますか?

TL;DR

この全体が要約すると次のようになると思います:iron-form-request私の鉄のフォームが index.html にあり、index.html が app.js によってブートストラップされている場合、イベント リスナー (の場合)を適切に追加するにはどうすればよいですか? 1.0 スターター キット?

さらに単純化:要素を作成していない (単に使用している) ときに、Polymer のシャドウ DOM にイベント リスナーを適切に追加するにはどうすればよいですか?

バグ？

以下のuser2422321のすばらしい回答の助けを借りて、鉄の要求が実行され、成功した鉄の要求応答が受信されます。ただし、「succeeded」が true を返し、エラーがなく、XHR が完全に解決された場合でも、その「response」プロパティは NULL を返します。「get」メソッドと「post」メソッドの両方がテストされ、同じ NULL の結果が得られました。

あまり注目されていませんが、10 日前に GitHub に正確に記録されたこれらの症状に一致するバグがあったようです: Issue 83。これは残念ですが、バグのようです。要素自体が修復されるまで、これを機能させる方法があるとは確信していません。

IRON-REQUEST は何を見たい?!

これをさらに調べてみると、responseURL が正しく、statusText が「OK」であるにもかかわらず、XHR でさえ直接「null」を返していることがわかります。実行しようとしている実際の PHP スクリプト (現在は "Hello World" を出力するだけ) に問題があるのではないかと考え始めています。

iron-form-request結果に特定の形式またはデータ型が必要ですか? PHPファイルに追加しようとしheader('Content-Type: text/plain');た後、検証済みのJSON文字列としてフォーマットしようとしましたが、応答はまだnull. 何も機能しないようです。

古い学校の直接XMLHttpRequestの仕事は通常... リクエストが送信される前に、鉄のフォームが何かを改ざんしていますか?

iron-form-error をキャッチするハンドラを設定しましたが、何も受信されません。応答のすべての情報によると、すべてが完璧です。ただ... null応答。何度も何度も…これは信じられないほどイライラします。

解決！(ちょっと)

さて、私は絶望的になったので、鉄のソースコード自体をざっと調べ始めました。現時点では、iron-form はまだ多少不具合があり、応答が適切にフォーマットされた json である場合にのみコンテンツを返すようです。iron-request.htmlでは、次のタイプを許可しているように見えますが、だまされてはいけません。私はjsonを機能させることしかできませんでした-残りは最終的に一致すると思います。

• json (アプリケーション/json)
• テキスト (テキスト/プレーン)
• html (テキスト/html)
• xml (アプリケーション/xml)
• arraybuffer (アプリケーション/オクテット ストリーム)

したがって、当面は、応答を JSON としてフォーマットし、一致するように DOCTYPE 宣言を含める必要があります。

私の場合、これは次のようになります (私を助けてくれた user2422321 に感謝します):

index.php

<div id="output">{{myOutput}}</div>

<form is="iron-form" id="contactUsForm" method="get" action="/contactus.php" on-iron-form-response="_onResponseRetrieved">
<paper-input id="Name" name="Name" value="text" label="Name"></paper-input>
<paper-button id="contactSubmitButton" on-tap="_submitHandler">Submit</paper-button>
</form>

app.js

(function(document) {
...
app._onResponseRetrieved = function(e) {
  this.myOutput = e.detail;
  console.log(e);
};
app._submitHandler = function(e) {
  this.$.contactUsForm.submit();
});
...
})(document);

そして最後に、これがパズルの重要な最後のピースでした。このファイルが出力するコンテンツが非常に重要であるとは、以前は考えていませんでした。なぜなら、XMLHttpRequestsは、ファイルが吐き出したものをそのまま返すからです。

contactus.php

<?php
// This is the line I added
header('Content-Type: application/json');
// Actual Code goes here
// Then make sure to wrap your final output in JSON
echo '{"test":"this is some test json to try"}';

これらすべての部品が配置されると、動作し、 contactus.phpe.detail.responseからエコーした JSON 応答が含まれます。