Javascript amp表单动作后xhr响应剥离图像标签_Javascript_Php_Json_Xmlhttprequest_Amp Form

Javascript amp表单动作后xhr响应剥离图像标签

javascript php json

Javascript amp表单动作后xhr响应剥离图像标签,javascript,php,json,xmlhttprequest,amp-form,Javascript,Php,Json,Xmlhttprequest,Amp Form,我正在尝试显示来自amp表单响应的图像。当我在reply上检查dom时，amp-img标签似乎被剥离了 form.php <!doctype html> <html amp lang="en"> <head> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-form" src="http

我正在尝试显示来自amp表单响应的图像。当我在reply上检查dom时，amp-img标签似乎被剥离了

form.php

<!doctype html>
<html amp lang="en">
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
</head>
<body>
<form method="post" action-xhr="/amp/test.post.form.endpoint.php">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" >
  <input type="submit" value="Submit">
  <div submit-success>
    <template type="amp-mustache">

      {{{message}}}
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">

      {{message}}
    </template>
  </div>
</form>

</body>
</html>


{{{message}}}
{{message}}

test.post.form.endpoint.php

<?php

const SUCCESS_CODE = 200;
const SUCCESS_MESSAGE = '<div><p>Start Test<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>End Test</p></div>';
const ERROR_CODE = 400;
const ERROR_MESSAGE = 'There are some missing values, please review your form.';

$host = isset($_SERVER['HTTP_X_FORWARDED_HOST'])
  ? $_SERVER['HTTP_X_FORWARDED_HOST']
  : $_SERVER['HTTP_HOST'];
header('Content-Type: application/json');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://' . $host);


if (!isset($_POST['name']) || empty($_POST['name'])) {
  $error = [
    'message' => ERROR_MESSAGE
  ];

  $json = json_encode($error);
  http_response_code(ERROR_CODE);
  die($json);
}

$success = [
    'message' => SUCCESS_MESSAGE
];
$json = json_encode($success);
http_response_code(SUCCESS_CODE);
die($json);

?>

导致

<div id="rendered-message-amp-form-0" i-amphtml-rendered=""><p>Start TestEnd Test</p></div>

启动测试和测试

如何让amp img标记与其余html代码一起发送，以及是什么导致它被删除

标头内容类型不允许标记标头（'content-type:application/json'）。请按以下方式更改模板。只需返回图像名称作为响应

<div submit-success>
    <template type="amp-mustache">
<div><p>Start Test<amp-img src={{{ message }}} alt="Welcome" height="400" width="800"></amp-img>End Test</p></div>
   </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">

      <div><p>Start Test<amp-img src={{{ message }}} alt="Welcome" height="400" width="800"></amp-img>End Test</p></div>

    </template>
  </div>


开始测试和结束测试
开始测试和结束测试

您的标题内容类型不允许标记标题（'content-type:application/json'）。请按以下方式更改模板。只需返回图像名称作为响应

<div submit-success>
    <template type="amp-mustache">
<div><p>Start Test<amp-img src={{{ message }}} alt="Welcome" height="400" width="800"></amp-img>End Test</p></div>
   </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">

      <div><p>Start Test<amp-img src={{{ message }}} alt="Welcome" height="400" width="800"></amp-img>End Test</p></div>

    </template>
  </div>


开始测试和结束测试
开始测试和结束测试