如何在Flask中使用Ajax提供的数据？开发场景及代码咨询

嘿，刚入门Flask就搞这么实用的项目，挺棒的！我看你已经写了前端Ajax的雏形，现在帮你把代码补全，理顺整个流程——从用户输入到Flask后端处理，再把结果返回前端。

1. 补全前端index.html代码 #

你的代码片段没写完，我帮你完善成完整可运行的版本，同时加上搜索结果展示的区域：

{% extends "layout.html" %} 

{% block content %}
<!-- 搜索输入框 -->
<input type="text" id="echoText" name="echoText" placeholder="输入YouTube搜索关键词...">

<!-- 搜索结果展示区 -->
<div id="searchResults"></div>

<script type="text/javascript">
// 从Flask模板获取根路径，避免硬编码
$SCRIPT_ROOT = {{ request.script_root|tojson }};

$(function() {
  $("#echoText").keyup(function() {
    // 获取输入框的值
    const searchQuery = $(this).val().trim();
    
    // 如果输入为空，清空结果区
    if (!searchQuery) {
      $("#searchResults").empty();
      return;
    }

    $.ajax({
      type: "GET",
      url: $SCRIPT_ROOT + "/search-youtube",
      contentType: "application/json; charset=utf-8",
      data: { query: searchQuery }, // 把搜索关键词传给后端
      dataType: "json",
      success: function(response) {
        // 清空之前的结果
        $("#searchResults").empty();
        
        // 遍历后端返回的结果，渲染到页面
        if (response.results.length === 0) {
          $("#searchResults").append("<p>没有找到相关视频</p>");
          return;
        }
        
        response.results.forEach(video => {
          const videoItem = `
            <div class="video-item">
              <h3>${video.title}</h3>
              <p>作者：${video.author}</p>
              <a href="https://www.youtube.com/watch?v=${video.id}" target="_blank">查看视频</a>
            </div>
          `;
          $("#searchResults").append(videoItem);
        });
      },
      error: function(xhr, status, error) {
        $("#searchResults").append("<p>搜索出错了，请稍后再试</p>");
        console.error("Ajax请求失败:", error);
      }
    });
  });
});
</script>
{% endblock %}

2. Flask后端代码实现 #

接下来写Flask的核心逻辑，包括路由设置和模拟YouTube搜索的处理（如果要调用真实的YouTube Data API，你需要去Google开发者平台申请API密钥，这里先做模拟）：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

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

@app.route('/search-youtube')
def search_youtube():
    # 获取前端传过来的搜索关键词
    query = request.args.get('query', '')
    
    # 这里模拟YouTube搜索结果，实际开发中替换成调用YouTube Data API的代码
    # 真实API调用示例（需要安装google-api-python-client）：
    # from googleapiclient.discovery import build
    # api_key = "你的API密钥"
    # youtube = build('youtube', 'v3', developerKey=api_key)
    # request = youtube.search().list(q=query, part='snippet', maxResults=5)
    # response = request.execute()
    # 然后解析response得到视频信息
    
    # 模拟结果
    mock_results = [
        {
            "id": "dQw4w9WgXcQ",
            "title": "Rick Astley - Never Gonna Give You Up",
            "author": "Rick Astley"
        },
        {
            "id": "7Cj8p9Zei90",
            "title": "Flask Tutorial for Beginners",
            "author": "Tech With Tim"
        }
    ]
    
    # 返回JSON格式的结果
    return jsonify({"results": mock_results})

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

3. 关键知识点梳理 #

• $SCRIPT_ROOT的作用：用来动态获取Flask应用的根路径，避免你硬编码URL导致部署时出错，模板里用{{ request.script_root|tojson }}传给前端。
• Ajax请求处理：用keyup事件实时响应用户输入，每次输入都发送GET请求到Flask的/search-youtube路由。
• Flask接收参数：用request.args.get()获取GET请求的参数，POST请求则用request.get_json()。
• 返回JSON响应：用jsonify()把Python字典转换成JSON格式，方便前端解析。

如果之后要接入真实的YouTube API，记得安装依赖pip install google-api-python-client，并替换掉模拟结果的部分哦！

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