Polymer 如何向PHP提交聚合表单并显示响应

使用Polymer 1.0，我设置了一个iron表单来提交一个简单的联系表单。其思想是使用PHP将表单提交到数据库表，然后在浏览器中显示PHP端的响应，而无需刷新—典型的AJAX。不过，我对聚合物环境有点担心——似乎应该有一个正确的方法来做到这一点，但数小时的搜索和修补并没有取得成效

我确实使用Polymer Starter Kit（lite）启动了这个项目，它使用一个脚本（app.js）来添加事件监听器等等。到目前为止，我还没有破坏这个功能，尽管文档中的所有示例都不是这样做的，所以它使事情变得更加复杂，因为我仍然习惯于聚合物

这是我到目前为止得到的。非常感谢您提供的任何建议

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>

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

失败的方法1

我尝试将iron ajax元素添加到index.html中，并从app.js中引用它，如下所示。不幸的是，当它试图添加事件侦听器时，整个应用程序崩溃。这似乎很奇怪，因为app.js中还有许多其他的部分以同样的方式添加事件侦听器

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>

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

失败的方法2

我发现并决定尝试

iron form response

事件。我现在收到的输出是

[object HTMLElement]

，这至少是一些东西，尽管我不确定它是否真的在工作

其他一切都保持不变，我将表单的目标改为指向我的php脚本，然后将app.js中的内容替换为以下内容：

   app.onDataRouteClick = function() {
      var drawerPanel = document.querySelector('#paperDrawerPanel');
      if (drawerPanel.narrow) {
         drawerPanel.closeDrawer();
      }
   };

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);

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';
    }

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

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

我越来越近了吗

不放弃

使用上面第二个失败的方法，iron窗体似乎正在发出请求，因为当我侦听“iron form response”事件时，它确实会触发

但是，唯一返回的是

[object HTMLElement]

——不知道该怎么办。我试着吐出它的一些属性（如developer.mozilla.org-

.title

、

.properties

、

.style

等上记录的），但它们似乎是空的。iron表单真的返回HtmleElement对象吗？还是这是一个错误？我认为它会像普通的

XMLHttpRequest

一样返回提交表单的PHP脚本的结果。如果铁的形态以某种方式把它压缩成一个物体，有没有办法再把它拉出来

TL；DR

我认为这一切归结起来就是：当我的iron表单位于index.html中，并且index.html由app.js引导时，如何正确地添加事件侦听器（用于

iron表单请求

），就像Polymer 1.0初学者工具包中默认情况一样

进一步简化：当我不创建元素（仅使用它）时，如何将事件侦听器正确添加到Polymer的ShadowDOM中

错误？

在下面user2422321的精彩回答的帮助下，正在执行iron请求并收到成功的iron请求响应。但是，它的“response”属性返回NULL，即使“successed”返回true，也没有错误，并且XHR已完全解决。“get”和“post”方法都使用相同的空结果进行测试

我看到10天前在GitHub上准确地登录了一个与这些症状相匹配的bug，尽管它并没有引起太多关注：。这很不幸，但似乎是一个bug。我不相信有任何方法可以让它工作，直到元件本身被修复

铁请求想要看什么

当我进一步探索这一点时，我发现即使XHR直接返回“null”，即使它的responseURL correct和statusText为“OK”。我开始怀疑我正在尝试运行的实际PHP脚本（目前只输出“Hello World”）是否有问题

iron form request

是否期望结果中包含某种格式或数据类型？我尝试添加

标题（'Content-Type:text/plain'）

到我的PHP文件，然后我尝试将其格式化为已验证的JSON字符串，但响应仍然是

null

。似乎什么都不管用

旧式direct

XMLHttpRequest

s工作正常。。。在提交请求之前，铁制表单是否有问题

我确实设置了一个处理程序来捕获iron表单错误，但没有收到任何错误。根据回复中的每一条信息，世界上的一切都是完美的。只是空响应。一次又一次。。。这真是令人难以置信的沮丧

解决方案（有点）

好吧，我已经够绝望的了，我开始翻阅iron的源代码。iron表单目前似乎仍有点浮躁，只有在响应格式正确的情况下才会返回内容。在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>

<?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"}';

<?php
$data = json_decode(file_get_contents('php://input'), true);
echo json_encode($data);
exit;

最后，这是拼图中最重要的最后一块。我以前没有考虑过这个文件输出的内容会非常重要，因为直接向上XMLHttpRequests会返回文件输出的内容

contactus.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>

<?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"}';

<?php
$data = json_decode(file_get_contents('php://input'), true);
echo json_encode($data);
exit;

---

我不太清楚什么是不起作用的，但我就是这样认为的
<div id="output">{{myOutput}}</div>

<!-- this is the web form -->
<form is="iron-form" id="contactUsForm" method="post" action="/" on-iron-form-response="_onResponseRetrieved">
   <input type="hidden" name="action" value="contactUsForm">
   <paper-input id="contactus-field-Name" name="Name" label="Name" value="test"></paper-input>
   <paper-button on-tap="_submitHandler">Send</paper-button>
</form>

<template is="dom-bind">

    <iron-ajax
            auto
            id="ajax"
            url="test.php"
            handle-as="json"
            method="POST"
            body='{"email":"ankita@gmail.com", "lastlogin":"Feb 21st 2016", "notifications":6}'
            content-type = "application/json"
            last-response="{{responseObject}}" >
    </iron-ajax>

    <login-element details="[[responseObject]]"></login-element>
</template>

<dom-module id="login-element" >
<template>

    <!--<form action="test1.php" method="post"  enctype='application/json'>-->
        <!--Name: <input type="text" name="name"><br>-->
        <!--E-mail: <input type="text" name="email"><br>-->
        <!--<input type="submit" onclick="submitForm()">-->
    <!--</form>-->

    <h2>{{details.email}}</h2>

</template>

<script>
    Polymer({
        is:"login-element",
        properties:{
            details:Object
        }
    });

</script>

<?php
$data = json_decode(file_get_contents('php://input'), true);
echo json_encode($data);
exit;