原生Js 调用python方法 ajax

原创

mob64ca12ea8117 2024-07-29 09:29:03 ©著作权

文章标签 Python AJAX json 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ea8117的原创作品，请联系作者获取转载授权，否则将追究法律责任

原生JS调用Python方法的AJAX实现

在Web开发中，我们经常需要在前端JavaScript代码中调用后端Python代码来处理一些复杂的业务逻辑。本文将介绍如何使用原生JavaScript通过AJAX技术调用Python后端方法。

流程图

首先，我们通过一个流程图来展示整个调用过程：

flowchart TD
    A[前端JavaScript] --> B[发送AJAX请求]
    B --> C[后端Python接收请求]
    C --> D[执行Python方法]
    D --> E[返回结果]
    E --> F[前端JavaScript处理结果]

关系图

接下来，我们使用关系图来描述前端和后端之间的数据交互关系：

erDiagram
    AJAX ||--o{ Python : 调用
    JavaScript ||--o{ AJAX : 发送请求
    Python ||--o{ 方法 : 执行
    方法 ||--o{ 结果 : 返回

实现步骤

后端Python方法编写：首先，我们需要在Python后端编写一个处理请求的方法。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/process', methods=['POST'])
def process_data():
    data = request.json
    # 处理业务逻辑
    result = data['number'] * 2
    return jsonify({'result': result})

前端JavaScript AJAX调用：然后，在前端JavaScript中使用AJAX技术调用这个Python方法。

function callPythonMethod() {
    var number = 10; // 假设需要处理的数字
    var data = {number: number};

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/process', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            console.log('Python方法返回结果：', response.result);
        }
    };
    xhr.send(JSON.stringify(data));
}