Flask+AJAX实现YouTube搜索结果前端展示问题求助

问题背景 #

开发学习用YouTube爬虫网页（仅用于学习，不对外发布），前端包含搜索输入框和按钮，点击按钮通过AJAX POST请求将关键词发送至Flask后端。后端可成功获取关键词并打印搜索结果链接到终端，但无法将结果返回并展示在HTML页面中。

问题根源 #

1. 前端AJAX仅发送请求，未处理后端返回的响应，没有将结果渲染到页面
2. 后端当前返回完整渲染的HTML页面，而非AJAX需要的结构化数据（如JSON）
3. 前端页面未预留展示搜索结果的区域

解决方案 #

1. 修改前端代码（index.html） #

添加结果展示容器，完善AJAX请求的响应处理逻辑，动态渲染搜索结果：

<body>
    <center>
        <span>
            <img src="{{ url_for('static', filename='assets/logo.png') }}" style="float: left;" id="logo">
            <input type="text" class="textbox" id="searchbar" style="width: 500px; height: 30px">
            <button style="height: 30px" onclick="performPost()">Search</button>
        </span>
        <!-- 新增结果展示容器 -->
        <div id="results" style="margin-top: 20px; text-align: left; width: 600px;"></div>
    </center>
</body>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    function performPost(){
        const searchValue = document.getElementById("searchbar").value;
        $.ajax({
            type: "POST",
            url: "{{ url_for('search') }}",
            data: {"search" : searchValue},
            dataType: "json", // 指定接收JSON格式数据
            success: function(response) {
                const resultsContainer = document.getElementById("results");
                resultsContainer.innerHTML = ""; // 清空历史结果
                // 遍历结果生成可点击链接
                response.forEach(url => {
                    const link = document.createElement("a");
                    link.href = url;
                    link.target = "_blank";
                    link.textContent = url;
                    const lineItem = document.createElement("div");
                    lineItem.appendChild(link);
                    resultsContainer.appendChild(lineItem);
                });
            },
            error: function(xhr, status, error) {
                console.error("请求出错：", error);
            }
        })
    }
</script>

2. 修改后端代码（main.py） #

调整路由逻辑，返回JSON格式的搜索结果列表，而非完整HTML页面：

import urllib.request
import urllib.parse
import re
from flask import Flask, render_template, request, jsonify

def searchSite(searchInput):
    query_string = urllib.parse.urlencode({"search_query" : searchInput})
    html_content = urllib.request.urlopen("http://www.youtube.com/results?" + query_string)
    search_results = re.findall(r'watch\?v=(.{11})', html_content.read().decode())
    return search_results

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/search', methods=['POST']) # 独立搜索路由，避免和首页冲突
def search():
    if request.method == 'POST':
        searchQuery = request.form.get('search') # 简化参数获取方式
        searchResults = searchSite(searchQuery)
        searchList = []
        # 处理结果不足10个的边界情况
        for i in range(min(10, len(searchResults))):
            searchList.append(f"http://www.youtube.com/watch?v={searchResults[i]}")
        
        print(searchList)
        return jsonify(searchList) # 返回JSON格式结果

if __name__ == '__main__':
    app.run(
        host = '127.0.0.1',
        port = 5001,
        debug = True
    )

关键改动说明 #

• 前端：新增结果展示容器，AJAX明确指定接收JSON数据，通过success回调动态生成结果链接，增加错误处理
• 后端：使用jsonify返回结构化数据，调整路由避免冲突，简化参数获取，处理结果数量不足的边界情况

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