我需要一段前后端交互的代码
时间: 2023-06-09 18:03:30 浏览: 62
好的,以下是一个简单的前后端交互的代码示例(使用Python Flask框架):
前端页面:
```HTML
<!DOCTYPE html>
<html>
<head>
<title>前后端交互示例</title>
</head>
<body>
<h1>前后端交互示例</h1>
<label for="name-input">请输入你的名字:</label>
<input type="text" id="name-input">
<button id="submit-btn">提交</button>
<p id="result-text"></p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/static/index.js"></script>
</body>
</html>
```
后端代码:
```python
from flask import Flask, request, jsonify
app = Flask(__name__, static_folder='static', static_url_path='/static')
@app.route('/', methods=['GET'])
def index():
return app.send_static_file('index.html')
@app.route('/api/submit-name', methods=['POST'])
def submit_name():
name = request.form['name'] # 获取前端提交的姓名
# 处理数据...
result = f"你好,{name}!欢迎访问我的网站!"
# 返回处理后的结果给前端
return jsonify({'result': result})
if __name__ == '__main__':
app.run(debug=True)
```
前端页面的JavaScript代码:
```javascript
$(document).ready(function() {
$('#submit-btn').click(function() {
var name = $('#name-input').val(); // 获取用户输入的姓名
$.post('/api/submit-name', {'name': name})
.done(function(response) {
$('#result-text').text(response.result); // 显示处理后的结果
})
.fail(function() {
alert('请求超时或发生错误!');
});
});
});
```
这段代码实现了一个简单的前后端交互功能,用户在前端页面输入姓名后点击提交,前端会将数据以POST方式提交给后端,后端接收到数据并进行处理,最后将处理后的结果以JSON格式返回给前端,前端再将结果显示在页面上。记得将代码保存为app.py并在命令行中运行,访问 http://localhost:5000 即可查看效果。