amp-mustache Success/Error 消息未显示

Question

所以，我上周发布了关于复制 header 的帖子。我相信我已经解决了这个问题，但现在它又引发了一个我似乎无法解决的新错误。我通过删除在表单提交函数的 PHP 中第二次添加的 headers 并只允许它们存在于 htaccess 中来解决我的最后一个问题。

表单提交 PHP 中存在的唯一 header 是 Content-Type 的设置为 application/json。

当我提交我的表单时，提交消息弹出正常。然后，当表单 submits/fails 时，它不会传回包含在 amp-mustache 模板标签中的消息。

    <div submitting>
      <template type="amp-mustache">
        Form submitting... Thank you for waiting.
      </template>
    </div>

    <div submit-success>
      <template type="amp-mustache">
        Thanks, your message has been sent successfully.
      </template>
    </div>

    <div submit-error>
      <template type="amp-mustache">
        Unfortunately your message could not be sent. Please try again later.
      </template>
    </div>

环顾四周后，似乎表明我的 Content-Type 在提交表单的 PHP 上未设置为 application/json，但是当我检查网络选项卡时Chrome 就 header 而言，一切都很好。

对 PHP (xhr-contact-test.php) 提交表单的响应 Headers:

access-control-allow-credentials: true
access-control-allow-headers: Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token
access-control-allow-methods: POST, GET, OPTIONS
access-control-allow-source-origin: https://www.craigattachments.com
access-control-expose-headers: AMP-Access-Control-Allow-Source-Origin
amp-access-control-allow-source-origin: https://www.craigattachments.com
cache-control: max-age=604800
cf-railgun: 4d68972973 0.01 0.656948 0030 cc99
cf-ray: 4de04cf54e22ccfe-EWR
content-encoding: br
content-security-policy: default-src * data: blob:; img-src * 'self' data: https: https://static.craigmanufacturing.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://cdn.ampproject.org/v0.js https://cdn.ampproject.org/v0/ https://cdn.ampproject.org/viewer/ https://cdn.ampproject.org/v/ https://cdn.ampproject.org/rtv/ https://static.craigmanufacturing.com *.google.com https://maps.googleapis.com/maps/api/js/ https://maps.googleapis.com/maps/api/place/js/ https://cdn.polyfill.io https://cdnjs.cloudflare.com/ajax/; object-src 'self' https://www.craigattachments.com/pdf/; media-src 'self' https://www.craigattachments.com/pdf/; plugin-types application/pdf; style-src 'self' 'unsafe-inline' https://static.craigmanufacturing.com https://cdn.ampproject.org/rtv/ https://fonts.googleapis.com/; base-uri 'self';
content-type: application/json
date: Tue, 28 May 2019 12:41:04 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
expires: Tue, 04 Jun 2019 12:41:03 GMT
feature-policy: microphone 'none'; payment 'none'; geolocation *; sync-xhr 'self' https://www.craigattachments.com
referrer-policy: same-origin
server: cloudflare
status: 200
strict-transport-security: max-age=31536000
vary: User-Agent
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

它传回的错误在下面并指向 amp-form.js 上的第 1073 行，这是在适当的 amp-mustache 模板标签上设置 i-amphtml-rendered 属性的函数。对此进行调查是让我想到 content-type 是导致问题的原因，但现在似乎设置正确并且错误仍然存在。

Uncaught (in promise) TypeError: b.setAttribute is not a function

我已经在 link 打开了我的测试联系表：https://www.craigattachments.com/contact-us-test/。

对我接下来应该去哪里有什么想法吗？我已经尝试了一些事情，例如测试某些 headers 的存在，在我的 htaccess 中设置 Content-Type 以及仅在 PHP 中设置我的 headers。

为其他人解决此问题的解决方案...如果您将电子邮件作为数组回显，例如 echo json_encode(array($email));，则会发生此错误。无论如何，将数组从等式中取出似乎可以解决它 - echo json_encode($email);

2019/06/12 更新：非常感谢 Aaron。如果将来任何人运行反对这个问题，这个问题已经得到了一些更好的错误处理参数：https://github.com/ampproject/amphtml/pull/22576

Answer 1

我快速看了一下，看起来 renderTemplate 方法返回的对象是一个数组，而不是一个元素。

https://github.com/ampproject/amphtml/blob/master/extensions/amp-form/0.1/amp-form.js#L1121

代码中可能存在错误。检查 div，看起来它们也都是相同的成功消息。是否有可能重现这是一个更简单的表单演示，只需最少的重现。例如只是形式谢谢

amp-mustache Success/Error 消息未显示

amp-mustache Success/Error Messages Not Displaying

php

.htaccess

amp-html