python和js交互调用的方法

更新时间：2020年06月23日 15:34:46 作者：silencement

在本篇文章里小编给大家整理了关于python和js交互调用的方法，需要的方法可以参考学习下。

后台代码都是利用的

1.【get方式】使用jquery的get json与后台交互

前端js代码片段

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();
});

后端pthon代码如下

# 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)

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)

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

前端js如下

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参数传入到后端才行。

实例扩展：

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
   )

js部分：

<!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如何交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Python数据可视化制作全球地震散点图
这篇文章主要介绍了Python数据可视化制作全球地震散点图，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-08-08
利用Python实现快速批量转换HEIC文件
HEIC 是苹果采用的新的默认图片格式，它能在不损失图片画质的情况下，减少图片大小。本篇文章将使用 Python 批量实现 HEIC 图片文件的格式转换，需要的可以参考一下
2022-07-07
python异常基类BaseException详解
这篇文章主要为大家介绍了python异常基类BaseException详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
python PyQt5事件机制和定时器原理分析及用法详解
PyQt为事件处理提供了两种机制：高级的信号与槽机制,以及低级的事件处理机制,在基于PyQt5的应用程序开发过程中经常会遇到一些需要循环执行的任务,即定时多长时间任务循环一次,本文给大家介绍了python PyQt5事件机制和定时器原理和用法,需要的朋友可以参考下
2024-07-07
基于Python制作简易的windows修改器
现在应该大部分人都使用win11系统吧，win11其实挺好用哈，只是有一点不好用，就是右键的菜单，今天做个小程序，就是应该修改win11的一个应用程序，感兴趣的可以了解一下
2022-08-08
Python导入自定义路径的方法
这篇文章主要介绍了Python导入自定义路径的方法，文章基于python的相关资料展开详细内容介绍，需要的小伙伴可以参考一下
2022-04-04
Python的经纬度与xy坐标系相互转换方式
这篇文章主要介绍了Python的经纬度与xy坐标系相互转换方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
LyScript实现计算片段Hash并写出Excel的示例代码
本案例将学习运用LyScript计算特定程序中特定某些片段的Hash特征值，并通过xlsxwriter这个第三方模块将计算到的hash值存储成一个excel表格，感兴趣的可以跟随小编一起学习一下
2022-09-09
Python入门教程超详细1小时学会Python
本文适合有经验的程序员尽快进入Python世界.特别地,如果你掌握Java和Javascript,不用1小时你就可以用Python快速流畅地写有用的Python程序.
2006-09-09
Pycharm学习教程（6） Pycharm作为Vim编辑器使用
这篇文章主要为大家详细介绍了最全的Pycharm学习教程第六篇，Pycharm作为Vim编辑器使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05

python和js交互调用的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具