Python与JS交互调用全解析：GET与Ajax方法详解

本文将详细介绍Python与JavaScript之间的交互调用方法，主要关注两种常见的实现方式：get方式和万能方式，这些方法在实际开发中非常实用。 1. get方式 - 使用jQuery的getJSON 在这个方法中，前端JavaScript代码通过jQuery的getJSON函数向Python后端发起GET请求。首先，前端获取用户输入的值（如表单中的两个数值），并将其封装到一个名为"data"的对象中： ```javascript var data = { 'a': $('input[name="a"]').val(), 'b': $('input[name="b"]').val() }; ``` 然后，将数据作为参数传递给`$.getJSON`，URL指向服务器的`_add_numbers`路由，请求成功后会处理返回的结果，并更新页面显示： ```javascript $.getJSON($SCRIPT_ROOT + '/_add_numbers', data, function(data) { $('#result').text(data.result); $('input[name="a"]').focus().select(); }); ``` 后端Python代码，使用Flask框架，通过`request.args.get`获取到前端发送过来的`a`和`b`参数，并进行相应的计算和返回： ```python @app.route('/_add_numbers', methods=['GET']) def add_numbers(): a = request.args.get('a', 0, type=int) b = request.args.get('b', 0, type=int) log.info(a) log.info(b) result = a + b return jsonify(result=result) ``` 2. 万能方式 - 使用jQuery的ajax 这个方法提供了更大的灵活性，不仅限于GET，还可以处理POST请求。前端JavaScript代码使用`.ajax`函数代替`getJSON`，设置请求类型（'get'或'post'）、URL、数据和数据类型： ```javascript var data = { 'a': $('input[name="a"]').val(), 'b': $('input[name="b"]').val() }; $.ajax({ type: 'get', // 或者改为 'type: 'post', 如果需要POST请求 url: $SCRIPT_ROOT + '/_add_numbers', data: JSON.stringify(data), // 对数据进行JSON编码 contentType: 'application/json; charset=UTF-8', dataType: 'json', success: function(response) { $('#result').text(response.result); $('input[name="a"]').focus().select(); }, error: function(xhr, status, error) { console.error(error); } }); ``` 后端Python代码保持不变，依然接受GET请求，处理请求参数并返回结果。 总结起来，Python与JavaScript交互调用主要有两种方式：一是通过jQuery的getJSON以GET方式，二是使用更通用的$.ajax方法，可以灵活切换GET或POST。理解并掌握这两种方式对于前后端协作开发是非常重要的，它们允许在前端进行用户界面操作，后端处理业务逻辑并返回结果。在实际项目中，开发者可以根据需求选择合适的方式，实现数据的双向通信。