写一个简单flask项目,要求使用ajax接口实现可视化
时间: 2024-03-23 07:38:31 浏览: 23
下面是一个简单的 Flask 项目示例,其中使用 Ajax 接口实现了一个可视化功能:
```python
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/ajax', methods=['POST'])
def ajax():
data = request.get_json()
number = data['number']
if number > 0:
result = 'positive'
elif number < 0:
result = 'negative'
else:
result = 'zero'
response = {'status': 'ok', 'result': result}
return jsonify(response)
if __name__ == '__main__':
app.run()
```
这个示例定义了两个路由:`/` 和 `/ajax`。`/` 路由返回了一个 HTML 模板,用于在浏览器中显示页面。`/ajax` 路由是一个 Ajax 接口,用于处理 POST 请求并返回 JSON 响应。
在 HTML 模板中,我们可以使用 JavaScript 来向 `/ajax` 发送 POST 请求,并处理响应数据。例如,下面是一个使用 jQuery 和 Chart.js 的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>可视化示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>可视化示例</h1>
<div>
<label for="number-input">请输入一个数:</label>
<input type="number" id="number-input">
<button id="submit-button">提交</button>
</div>
<canvas id="chart"></canvas>
<script>
$(function() {
$('#submit-button').click(function() {
$.ajax({
type: 'POST',
url: '/ajax',
contentType: 'application/json',
data: JSON.stringify({number: $('#number-input').val()}),
dataType: 'json',
success: function(response) {
var result = response.result;
var backgroundColor, borderColor;
if (result === 'positive') {
backgroundColor = 'rgba(75, 192, 192, 0.2)';
borderColor = 'rgba(75, 192, 192, 1)';
}
else if (result === 'negative') {
backgroundColor = 'rgba(255, 99, 132, 0.2)';
borderColor = 'rgba(255, 99, 132, 1)';
}
else {
backgroundColor = 'rgba(54, 162, 235, 0.2)';
borderColor = 'rgba(54, 162, 235, 1)';
}
var data = {
datasets: [{
data: [$('#number-input').val()],
backgroundColor: [backgroundColor],
borderColor: [borderColor],
borderWidth: 1
}]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var chart = new Chart($('#chart'), {
type: 'bar',
data: data,
options: options
});
},
error: function(xhr, status, error) {
console.log('请求失败。状态码为 ' + xhr.status);
}
});
});
});
</script>
</body>
</html>
```
这个示例向 `/ajax` 发送 POST 请求,并使用响应数据来绘制一个条形图。当用户在输入框中输入一个数并点击提交按钮时,它会向 `/ajax` 发送 POST 请求,并将输入数作为请求体发送。当响应成功返回时,它会根据响应数据的值来设置条形图的颜色和数据。如果请求失败,它会打印错误信息到控制台。