amp-表单post操作-xhr响应剥离图像标签
amp-表单post操作-xhr响应剥离图像标签
提问于 2019-07-12 14:54:00
我正在尝试显示来自amp-form响应的图像。当我在回复时检查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>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代码一起发送?是什么原因导致它被删除？
回答 1
Stack Overflow用户
发布于 2019-07-12 16:00:06
您的标头内容类型不允许标记标头(‘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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57001611
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号