如何使用 JavaScript 将 JSON 文件从 HTML 页面发送到 ESP
Posted
技术标签:
【中文标题】如何使用 JavaScript 将 JSON 文件从 HTML 页面发送到 ESP【英文标题】：How I can send JSON file using JavaScript from HTML page to ESP 【发布时间】：2021-10-14 14:07:51 【问题描述】：我是编程新手。 我制作了一个 html 代码并准备了一个 javascript 代码来编写一个 JSON 字符串。 这是我的页面代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<script>
var button_1_status = 0;
var button_2_status = 0;
var button_3_status = 0;
var button_4_status = 0;
var button_5_status = 0;
function erase()
button_1_status = 0;
button_2_status = 0;
button_3_status = 0;
button_4_status = 0;
button_5_status = 0;
function button_1_on()
erase();
button_1_status = 1;
console.log("Button 1 is ON");
send_data();
function button_2_on()
erase();
button_2_status = 1;
console.log("Button 2 is ON");
send_data();
function button_3_on()
erase();
button_3_status = 1;
console.log("Button 3 is ON");
send_data();
function button_4_on()
erase();
button_4_status = 1;
console.log("Button 4 is ON");
send_data();
function button_5_on()
erase();
button_5_status = 1;
console.log("Button 5 is ON");
send_data();
function send_data()
var full_data = '"Forward" :'+button_1_status+',"Right":'+button_2_status+',"Stop" :'+button_3_status+',"Left" :'+button_4_status+',"Backward" :'+button_5_status+'';
</script>
<body>
<form action="connect.php" method="POST">
<div class="container">
<button class="btn" id="Forward" value="1" name="Forward" onclick="button_1_on()">FORWARD</button><br />
<button class="btn" id="Left" value="1" name="Left" onclick="button_2_on()">LEFT</button>
<button class="btn" id="Stop" value="1" name="Stop" onclick="button_3_on()">STOP</button>
<button class="btn" id="Right" value="1" name="Right" onclick="button_4_on()">RIGHT</button><br />
<button class="btn" id="Backward" value="1" name="Backward" onclick="button_5_on()">BACKWARD </button>
</div>
</body>
</html>
我目前使用的是本地主机，如何将此 JSON 文件发送到 ESP？我看到一些视频使用
xhr.open 和 .setRequestHeader 和 .send
但我不知道要插入哪些参数，他们将其发送到 php 文件，而我想通过 POST 将其发送到 ESP，因此我可以使用 GET 方法接收 JSON 文件。 我已经迷路了一段时间，我会感谢你的帮助。我正在使用 Arduino IDE 和 C++
【问题讨论】：
我不太确定更广泛的路径，以及您希望如何接收 HTTP POST 并将其发送到 Arduino/ESP。但我认为像***.com/a/39519299/1275942 这样的东西可能是你想要的。 developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… 是一个可能比您需要的更深入的概述。 【参考方案1】：也许可以试试： https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/ 我认为它会起作用，但对我来说，将代码添加到 ide 更简单，例如： https://randomnerdtutorials.com/esp32-websocket-server-arduino/
【讨论】：
以上是关于如何使用 JavaScript 将 JSON 文件从 HTML 页面发送到 ESP的主要内容，如果未能解决你的问题，请参考以下文章
Javascript / webpack：如何将目录中的所有json文件与文件的自定义循环连接起来
如何将输入/选择值从网站保存到 XML/JSON 文件并使用 JavaScript 自动加载再次填充它们