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

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

  • 前端:HTML、JavaScript
  • 后端:FLask
  • 前端发送JSON格式数据,后端接收数据并响应

代码实现

前端

html 复制代码
<!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>
    </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>
</body>
</html>

Flask后端

python 复制代码
@app.route('/publish', methods=['POST'])
def publish_message():
    """ 获取前端页面提交的数据 """
    # 格式化数据
    request_data = request.get_json()
    print(request_data)
	# 响应
    return jsonify({"code": "200", 'status': 'success'})


if __name__ == '__main__':
    app.debug = True
    app.run()

效果

相关推荐
0wioiw06 分钟前
Ubuntu基础(Python虚拟环境和Vue)
linux·python·ubuntu
xiao5kou4chang6kai415 分钟前
Python-GEE遥感云大数据分析与可视化(如何建立基于云计算的森林监测预警系统)
python·数据分析·云计算·森林监测·森林管理
presenttttt23 分钟前
用Python和OpenCV从零搭建一个完整的双目视觉系统(四)
开发语言·python·opencv·计算机视觉
开开心心就好43 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享44 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
木头左3 小时前
逻辑回归的Python实现与优化
python·算法·逻辑回归
quant_19864 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言