Flask开发：不跳转新URL从HTML调用Python函数（eBay API项目）

要实现点击搜索按钮时调用get_data函数且不跳转页面、保留输入框内容，核心是用AJAX异步请求，让前端在不刷新页面的情况下和后端交互，以下是具体实现步骤：

1. 调整Flask后端代码 #

修改get_data路由，让它接受POST请求并返回JSON格式的数据（而非渲染页面），这样前端可以直接处理返回的商品信息：

from flask import Flask, render_template, request, jsonify
# 导入你调用eBay API的自定义模块
import ebay_api

app = Flask(__name__)

# 原index路由保持不变
@app.route('/index')
def index():
    return render_template('search_on_ebay.html')

# 修改get_data为POST请求，返回JSON格式结果
@app.route('/get_data', methods=['POST'])
def get_data():
    # 获取前端传入的搜索关键词
    search_keyword = request.form.get('search_keyword')
    if not search_keyword:
        return jsonify({'error': '请输入搜索关键词'}), 400
    
    # 调用eBay API获取商品数据
    try:
        # 替换为你实际调用eBay API的逻辑
        product_data = ebay_api.fetch_items(search_keyword)
        return jsonify({'products': product_data})
    except Exception as e:
        return jsonify({'error': f'API调用失败：{str(e)}'}), 500

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

2. 修改前端HTML与添加JS逻辑 #

保留你的两个表单结构，通过JavaScript监听按钮点击事件，阻止默认表单提交行为，异步发送请求并渲染结果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>eBay商品搜索</title>
    <script>
        // 页面加载完成后绑定事件
        document.addEventListener('DOMContentLoaded', () => {
            const searchInput = document.getElementById('search-input');
            const searchBtn = document.getElementById('search-btn');
            const resultArea = document.getElementById('result-area');

            // 监听按钮点击
            searchBtn.addEventListener('click', (e) => {
                // 阻止表单默认提交（避免页面跳转）
                e.preventDefault();
                
                const keyword = searchInput.value.trim();
                if (!keyword) {
                    resultArea.innerHTML = '<p style="color:red;">请输入搜索关键词</p>';
                    return;
                }

                // 发送异步POST请求
                fetch('/get_data', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `search_keyword=${encodeURIComponent(keyword)}`
                })
                .then(res => res.json())
                .then(data => {
                    if (data.error) {
                        // 显示错误信息
                        resultArea.innerHTML = `<p style="color:red;">${data.error}</p>`;
                    } else {
                        // 渲染商品列表
                        let html = '<ul>';
                        data.products.forEach(item => {
                            html += `<li>
                                <h3>${item.title}</h3>
                                <p>价格：$${item.price}</p>
                                <p>链接：<a href="${item.url}" target="_blank">查看商品</a></p>
                            </li>`;
                        });
                        html += '</ul>';
                        resultArea.innerHTML = html;
                    }
                })
                .catch(err => {
                    resultArea.innerHTML = `<p style="color:red;">请求出错：${err.message}</p>`;
                });
            });
        });
    </script>
</head>
<body>
    <!-- 输入框表单 -->
    <form>
        <input type="text" id="search-input" placeholder="输入商品关键词">
    </form>
    <!-- 搜索按钮表单 -->
    <form>
        <button type="submit" id="search-btn">搜索eBay商品</button>
    </form>

    <!-- 结果展示区域 -->
    <div id="result-area"></div>
</body>
</html>

关键说明 #

• 阻止默认行为：通过e.preventDefault()阻止按钮所在表单的默认提交跳转，确保页面不刷新。
• 异步请求：使用原生fetch API发送POST请求，无需额外依赖，请求过程中页面保持原状态，输入框内容不会丢失。
• 数据渲染：请求成功后，将后端返回的JSON数据动态拼接成HTML，插入到页面指定区域，实现无刷新更新内容。
• 错误处理：覆盖了无输入、API调用失败、请求异常等场景，给用户明确的反馈。

内容的提问来源于stack exchange，提问作者JacopoBiondi