按钮监听事件实现向后端提交ajax请求

在前端页面中，可以通过监听按钮点击事件来向后端提交 Ajax 请求。实现步骤如下：

1. 选定需要监听的按钮，给它添加一个唯一的 id 属性。

2. 使用 JavaScript 获取该按钮元素，绑定点击事件监听器。

let submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', function() {
  // 处理提交事件
});

3. 在事件监听器中编写 Ajax 请求代码，使用 XMLHttpRequest 对象向后端发送请求。

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));

其中，`xhr.open()` 方法指定请求的方法和 URL，`xhr.setRequestHeader()` 方法设置请求头，`xhr.send()` 方法发送请求并传递请求体数据。

4. 在后端接收请求，处理数据并返回响应。

@app.route('/api/submit', methods=['POST'])
def handle_submit():
    data = request.get_json() # 获取请求体数据
    # 处理数据，返回响应

以上就是通过监听按钮点击事件实现向后端提交 Ajax 请求的基本流程。需要注意的是，请求和响应数据的格式需要统一，以便服务器正确解析数据。