通过html页面向后端传递JSON数据

高亚奇

已于 2024-07-12 10:17:06 修改

阅读量39

点赞数

分类专栏：上位机框架 Qt+QtWebApp+HTML 文章标签： html json 前端

于 2024-07-12 09:57:51 首次发布

本文链接：https://blog.csdn.net/m0_73482095/article/details/140370892

版权

上位机框架 Qt+QtWebApp+HTML 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

代码实现

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="{{ url_for("static", filename="jquery.js") }}"></script>
</head>
<body>
    <br>
    <h2 style="text-align: center;">机械臂动作测试</h2>
    <div style="text-align: center;">
        <br>
        <input id="topic" type="text" placeholder="请输入主题"><br><br>
        <input id="payload" type="text" placeholder="请输入内容"><br><br>
        <button onclick="sendData()">发送表格数据</button>
		<button onclick="sendData2()">机械臂动作</button>
    </div>


    <script>
        function sendData() {
            // 获取输入框中的数据
            const topic = document.getElementById('topic').value;
            const payload = document.getElementById('payload').value;
            console.log(topic,payload);
            // 将数据转换为json格式
            const jsonData = JSON.stringify({"topic":topic,"payload":payload})
            console.log("本次提交数据：",jsonData);

            // 创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            // 设置POST请求，并指定后端接收数据的URL
            xhr.open("POST", "/publish", true);
            // 设置请求头，指定发送的数据类型为JSON
            xhr.setRequestHeader("Content-Type", "application/json");
            // 处理响应数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 执行成功后，后端返回的数据
                    var response = JSON.parse(xhr.responseText);
                    console.log("本次提交响应的数据：",response);
                } else if (xhr.readyState === 4) {
                    console.error('请求失败，服务器无响应');
                }
            };
            // 发送请求，并将JSON数据作为请求体发送给后端
            xhr.send(jsonData);
			
        }
		
    </script>
	
	
	<script>
        function sendData2() {
            // 获取输入框中的数据
            const topic = document.getElementById('topic').value;
            const payload = document.getElementById('payload').value;
            console.log(topic,payload);
            // 将数据转换为json格式
            const jsonData = JSON.stringify({"topic":topic,"payload":payload})
            console.log("本次提交数据：",jsonData);

            // 创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            // 设置POST请求，并指定后端接收数据的URL
            xhr.open("POST", "/publish2", true);
            // 设置请求头，指定发送的数据类型为JSON
            xhr.setRequestHeader("Content-Type", "application/json");
            // 处理响应数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 执行成功后，后端返回的数据
                    var response = JSON.parse(xhr.responseText);
                    console.log("本次提交响应的数据：",response);
                } else if (xhr.readyState === 4) {
                    console.error('请求失败，服务器无响应');
                }
            };
            // 发送请求，并将JSON数据作为请求体发送给后端
            xhr.send(jsonData);
			
        }
		
    </script>
</body>
</html>