使用 jQuery 将值发布到 api 未按预期工作
Posted
技术标签:
【中文标题】使用 jQuery 将值发布到 api 未按预期工作【英文标题】：Posting values to an api using jQuery not working as intended 【发布时间】：2021-12-30 19:41:10 【问题描述】：我正在尝试创建一个 html 表单，用户可以通过该表单将文本字段中写入的值提交给外部 api (ThingSpeak)。这个 api 处理从这个表单接收到的值，并在 iframe 中返回一个图。 我编写的脚本工作正常，只有当文件刚刚打开时。使用同一文件重新加载和重新提交时，它无法推送新值。输出最终显示嵌入 iframe 中的最后一个图。
包含表单的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>ThingSpeak Portal</title>
</head>
<body>
<form>
<label id="1" for="signal">Enter Signal: ex - @(t)sin(t): </label><br>
<input type"text" id="signal"><br>
</form>
<button>Submit</button>
<script>
$(document).ready(function()
$("button").click(function()
var input = $("#signal")[0].value;
if (input!="" && input!=null)
$.post("https://api.thingspeak.com/update.json" ,
api_key : "XXXXXX",
field1: input,
function()
alert("Directing to output...");
// location.reload();
window.location = "output1.html";
);
else
alert("Error!");
location.reload();
);
);
</script>
</body>
</html>
包含 iframe 形式的输出的 html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe id="plot" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/435674"></iframe>
<script>
var iframe = document.getElementById('plot');
iframe.src = iframe.src;
</script>
</body>
</html>
如果有人能发现问题并帮助我解决它，那就太棒了。 提前致谢！
【问题讨论】：
【参考方案1】：看来，来自表单页面 (index.html) 的成功 API POST 请求只会将用户重定向到在 iframe 中硬编码绘图的 output1.html ：
src="https://thingspeak.com/apps/matlab_visualizations/435674"
所以这个输出图总是会被加载，因为 src 是硬编码的并且永远不会更新。此外，从成功的 POST 请求返回的数据也没有做任何事情，如果我正确理解了 api documentation，它应该包含绘图的 url。
这是访问请求返回的数据的一种方法：
$.post("https://api.thingspeak.com/update.json" ,
api_key : "XXXXXX",
field1: input,
function(data)
console.log(data) // log anything returned to the console
);
至于显示新的情节：
一种选择是在 index.html 中添加 iframe，其中 iframe src 可以使用 POST 请求返回的必要数据通过 javascript 自动更新。
如果您想在 output1.html 中显示结果，您需要一种方法将返回的数据与您的请求一起传输，该方法将用于更改该页面 iframe 的 src .这应该可以帮助您：How do I redirect to an HTML page and bring in attached data?
【讨论】：
以上是关于使用 jQuery 将值发布到 api 未按预期工作的主要内容，如果未能解决你的问题，请参考以下文章