使用JavaScript在HTML按钮上单击发送JSON数据到托管的Python Flask API,并在HTML标签上打印来自API的响应,可以按照以下步骤进行:
<button id="sendButton">发送数据</button>
<p id="response"></p>
document.getElementById("sendButton").addEventListener("click", function() {
// 创建一个JSON对象
var data = {
key1: "value1",
key2: "value2"
};
// 发送POST请求到API
fetch("/api", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(function(response) {
return response.json();
})
.then(function(jsonResponse) {
// 在HTML标签上打印API的响应
document.getElementById("response").textContent = jsonResponse.message;
})
.catch(function(error) {
console.log(error);
});
});
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route("/api", methods=["POST"])
def api():
data = request.get_json()
# 处理接收到的JSON数据
# ...
# 返回JSON响应
response = {
"message": "API响应消息"
}
return jsonify(response)
if __name__ == "__main__":
app.run()
这样,当用户点击HTML按钮时,JavaScript代码将发送JSON数据到Python Flask API,并将API的响应显示在HTML标签上。
请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。另外,腾讯云提供了一系列云计算相关的产品,可以根据具体需求选择适合的产品进行开发和部署。
领取专属 10元无门槛券
手把手带您无忧上云