Python与JavaScript前后台交互实现指南

拾柒

发布时间：2026-10-14| 4人浏览过

原创

本文详细解析Python后端与JavaScript前端的交互方法。通过jQuery的$.getJSON和$.ajax函数，演示了GET与POST两种请求模式下的数据传递。结合Flask框架，展示了如何接收前端参数并返回JSON响应，同时对比了表单提交与非表单提交的处理差异，提供完整代码示例以助开发者快速实现前后端通信。

Python与JS交互概述

后端代码均基于

GET方式交互实现

1.【get方式】利用jQuery的getJSON方法与后端进行数据交互

前端JavaScript代码片段如下


var data= {
'a': $('input[name="a"]').val(),
'b': $('input[name="b"]').val()
}
$.getJSON($SCRIPT_ROOT + '/_add_numbers',data, function(data) {
$('#result').text(data.result);
$('input[name=a]').focus().select();
});

后端Python代码实现如下


# ajax，Get方式与js交互(非表单）采用了flask框架@app.route('/_add_numbers')def add_numbers():
  """Add two numbers server side, ridiculous but well..."""
  a = request.args.get('a', 0, type=int)
  b = request.args.get('b', 0, type=int)
  log.info(a)
  log.info(b)  return jsonify(result=a + b)

AJAX通用交互方式

2.【通用方式】使用jQuery的ajax方法进行交互，通过配置不同参数，既可支持get也可支持post请求

上述示例若改用ajax方式，前端代码调整如下


var data= {
          'a': $('input[name="a"]').val(),
          'b': $('input[name="b"]').val()
        }
{#        $.getJSON($SCRIPT_ROOT + '/_add_numbers',data, function(data) {#}
{#          $('#result').text(data.result);#}
{#          $('input[name=a]').focus().select();#}
{#        });#}

        $.ajax({
          type: 'get',
          url: $SCRIPT_ROOT + '/_add_numbers',
          data: data,
          contentType: 'application/json; charset=UTF-8',
          dataType: 'json',
          success: function(data) {
            $('#result').text(data.result);
            $('input[name=a]').focus().select();
          },
          error: function(xhr, type,xxx) {
            alert('error ')
          }
        });

后端代码保持不变，依然为


# ajax，Get方式与js交互(非表单）@app.route('/_add_numbers')def add_numbers():
  """Add two numbers server side, ridiculous but well..."""
  a = request.args.get('a', 0, type=int)
  b = request.args.get('b', 0, type=int)
  log.info(a)
  log.info(b)  return jsonify(result=a + b)

POST方式交互示例

3.补充一个post方式的ajax示例

前端JavaScript代码如下


function testmethod ()
    {
      alert('rabbit');
      var data = {
        "name": "test"
      }
      $.ajax({
        type: 'POST',
        url: '/login',
        data:data,
        contentType: 'application/json; charset=UTF-8',
        dataType: 'json',
        success: function(data) {
          $('#result').text(data.username);
        },
        error: function(xhr, type) {
          alert('error ')
        }
      });
    }

后端处理代码如下：


# ajax ，post方式与js交互（表单提交）
@app.route('/login',methods=['POST'])
def login():
  log.info('lalal')
  return jsonify(username='xixi',pwd='123')

交互原理与表单提交说明

通过上述方式，即可轻松实现前端与后端的交互

从本质上看，前端与后端的交互均是通过JSON格式数据完成的

至于传统的表单提交，则无需编写JS代码。在form表单中设置submit类型的按钮，点击时会自动将数据提交到后端对应的路由进行处理。对于此类表单提交，后端可以使用


s=request.form.get('username',None)

来获取前端网页传递的值。但如果涉及非表单提交，则需要通过JS获取值后，利用data参数传入到后端。

Flask与JS完整交互实例

实例扩展：

Python使用Flask与JS进行前后台交互的示例

Flask与JS进行前后台交互的代码如下，此处展示后端向前端发送数据的逻辑：

Python部分代码：


# -*- coding: utf-8 -*-
from flask import Flask,jsonify,render_template
import json
 
app = Flask(__name__)#实例化app对象
 
testInfo = {}
 
@app.route('/test_post/nn',methods=['GET','POST'])#路由
def test_post():
 testInfo['name'] = 'xiaoming'
 testInfo['age'] = '28'
 return json.dumps(testInfo)
 
@app.route('/')
def hello_world():
 return 'Hello World!'
 
@app.route('/index')
def index():
 return render_template('index.html')
 
 
if __name__ == '__main__':
 app.run(host='0.0.0.0',#任何ip都可以访问
   port=7777,#端口
   debug=True
   )

JavaScript部分代码：


<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>echarts</title>
 <style type="text/css">
  html,
  body {
   width: 100%;
   height: 100%;
  }
 
  body {
   margin: 0px;
   padding: 0px
  }
 
  div {
   float: left;
  }
 
  #container {
   width: 50%;
   height: 100%;
  }
 
  #info {
   padding: 10px 20px;
  }
 </style>
</head>
 
<body>
 <div id="container"></div>
 <div id="info">数据展示：</div>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script>
  $.ajax({
  url: "test_post/nn",
  type: "POST",
  dataType: "json",
  success: function (data) {
   console.log(data)
  }
  })
 
	</script>
 
</body>
 
</html>

至此，关于Python和JS交互调用的方法介绍完毕。如需了解更多Python与JS交互相关内容，请查阅本站过往文章或继续浏览后续文章，感谢大家的支持！