### 如何从前端通过 HTTP 请求调用 Python 后端 API 从前端调用后端 API 是现代 Web 开发的核心技术之一。以下是关于如何利用 JavaScript 和 AJAX 技术从前端向基于 Python 的后端发送 HTTP 请求的具体方法。 #### 使用 XMLHttpRequest 对象实现 GET 或 POST 请求 JavaScript 中可以通过 `XMLHttpRequest` 对象发起异步请求，从而与后端进行通信。这种机制被称为 AJAX (Asynchronous JavaScript And XML)，它允许页面无需刷新即可更新部分内容[^1]。 下面是一个简单的例子展示如何使用 `XMLHttpRequest` 发起 GET 请求： ```javascript function fetchUserData() { var xhr = new XMLHttpRequest(); xhr.open("GET", "/api/userdata", true); // 设置请求类型为 GET 并指定目标 URL xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); // 解析响应数据 } }; xhr.send(); // 发送请求 } ``` 对于更复杂的场景，如需要传递参数给服务器，则可以采用 POST 方法。以下是如何构建一个 POST 请求的例子： ```javascript function sendFormData(dataToSend) { var xhr = new XMLHttpRequest(); xhr.open("POST", "/submit_form", true); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { alert("Data submitted successfully!"); } }; xhr.send(JSON.stringify(dataToSend)); } ``` #### 利用 Fetch API 进行现代化开发 尽管传统的 `XMLHttpRequest` 能够满足基本需求，但现代浏览器推荐使用更加简洁易读的 Fetch API 来处理网络请求操作。Fetch 提供了一个更为直观的方式来进行资源获取，并支持 Promise 链式编程风格。 这里给出一段代码片段演示如何运用 Fetch 执行带查询字符串附加信息的 GET 请求以及提交 JSON 数据至服务器的过程: ```javascript // Example of a GET request with query parameters using Fetch API. fetch('/search?query=example', { method: 'GET', }).then(response => response.json()).then(data => console.log(data)); // Example of sending data via POST request to the server endpoint '/upload'. const postData = { key: 'value' }; fetch('/upload', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(postData), }) .then(res => res.text()) .catch(error => console.error('Error:', error)) .finally(() => console.log('Request completed')); ``` #### Flask 应用程序中的安全认证逻辑 当涉及到敏感功能时，在视图层面上加入适当的安全措施至关重要。例如，Flask 可以借助自定义工具模块完成用户权限校验工作。如下所示即为一种典型做法——将身份验证封装成独立函数以便于重用和维护[^2]: ```python from flask import request, jsonify @app.route("/protected-resource") def protected_resource(): auth_header = request.headers.get('Authorization') if not auth_header or not check_token(auth_header.split()[1]): return jsonify({"error": "Unauthorized"}), 401 # If authenticated proceed further... return jsonify({"message": "Access granted!"}) # Assume this is defined elsewhere as per requirement. def check_token(token): ... ``` #### 实际案例分析：电商平台商品评论接口设计 假设存在这样一个 RESTful 接口用于检索某电商平台上特定产品的最新客户评价详情列表。那么客户端可能按照如下模式组织其请求结构[^3]: | 参数名 | 类型 | 是否必填 | 描述 | |--------|----------|-----------|----------------------------------------------------------------------| | api_key| String | 是 | 用户唯一标识符 | | secret | String | 是 | 密码串 | | cache | String | 否 | 默认 yes 表示优先加载缓存版；no 强制即时抓取 | 实际应用中可能会像这样编写前端部分来消费上述服务： ```javascript let params = new URLSearchParams({ api_key: YOUR_API_KEY, secret: YOUR_SECRET, cache: 'no', }); fetch(`https://ecommerce.example.com/api/item_reviews?${params}`) .then((response) => response.json()) .then((reviews) => displayReviews(reviews)) .catch(console.warn); function displayReviews(reviews){ let container = document.getElementById('review-list'); reviews.forEach(review => { let li = document.createElement('li'); li.textContent = `${review.author}: ${review.content}`; container.appendChild(li); }); } ``` 以上就是有关如何从前端通过 HTTP 协议访问由 Python 编写的后台应用程序的相关指导说明。