我有一个RESTFul API，它通过GET端点呈现HTML。如何在我的wordpress网站中显示此html与来自表单的自定义标题？
我使用的是一个nocode API，当用户发出GET请求时，它根据URL中的一些参数返回一些HTML。我希望改进用户体验，并有一个表单，如contact 7表单，它可以映射调用API中每个表单字段的用户输入。
例如，表单如下所示：
姓名: Todd : todd@gmail.com Key: zjdHSDFHSDFHSDFS
我的API是示例https://api.com/endpoint/v1/。
当用户输入姓名、电子邮件和密钥时，我需要打这样的电话：
我的API是一个示例https://api.com/endpoint/v1?name={name}&email={email}，其密钥字段作为头(X：{ Key })传入
我不知道如何用javascript或者wordpress插件来完成这个任务。
回答 1
Stack Overflow用户
发布于 2022-02-22 05:01:26
这是一些代码。它是一个通用的HTML表单，以及放置在head标记中的普通head中的一个自定义提交函数。我认为它达到了你想要的，除了标题。
不可能使用头执行HTTP重定向，请读取更多的这里。另一种选择是执行异步请求，如果它返回用新的HTML替换现有的HTML，您可以使用用新的HTML替换现有的HTML。在我看来，这是一种有点无趣的做法。
就目前情况而言，我不确定像这样的标题会增加什么值。如果它被硬编码到HTML/JavaScript中，任何人都可以看到、操作它，或者在自己的表单上使用它来欺骗您的。为了避免这种情况，您可以考虑使用PHP。我知道W3有使用PHP的HTML表单的资源。
<html>
<head>
<script>
function submitFunction(e) {
// Prevent the default form submitting actions to occur
e.preventDefault();
e.stopPropagation();
// Get the form
let form = document.querySelector("#myForm");
// Get all field data from the form
let data = new FormData(form);
// Convert key-value pairs to URL parameters
let params = new URLSearchParams(data);
// Build the endpoint URL
let newUrl = `https://api.com/endpoint/v1?${params}`;
// Send to endpoint URL
window.location.href = newUrl;
}
</script>
</head>
<body>
<h2>HTML Form</h2>
<form id="myForm" onsubmit="submitFunction(event)">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>https://stackoverflow.com/questions/71215392
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号