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

您可能感兴趣的文章:

2款Python内存检测工具介绍和使用方法
这篇文章主要介绍了2款Python内存检测工具介绍和使用方法,可以用来分析Python程序的内存使用量,需要的朋友可以参考下
2014-06-06
Python中对象迭代与反迭代的技巧总结
这篇文章将通过实例给大家分享Python中对象迭代与反迭代的技巧，对大家学习或者使用python具有一定的参考借鉴价值。有需要的下面来一起看看吧。
2016-09-09
Python对象循环引用垃圾回收算法详情
这篇文章主要介绍了Python对象循环引用垃圾回收算法详情，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，感兴趣的小伙伴可以参考一下
2022-09-09
使用PYTHON接收多播数据的代码
一个PYTHON脚本，能够在LINUX上发送多播数据。其实编制起来也不算太麻烦。具体代码如下
2012-03-03
python实现查询IP地址所在地
本文给大家分享的是使用Python实现根据ip138的API查询IP的地理位置的代码，非常的实用，推荐给大家，有需要的小伙伴可以参考下。
2015-03-03
Python中replace方法实例分析
这篇文章主要介绍了Python中replace方法,有一定的实用价值,需要的朋友可以参考下
2014-08-08
用Python Turtle画棵樱花树送给自己
心情不好的时候，来用Python和Turtle库画棵樱花树送给自己吧，自己也要好好爱自己才对！文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试
2022-02-02
python如何在word中存储本地图片
这篇文章主要介绍了python如何在word中存储本地图片，想了解docx模块的同学，可以参考下
2021-04-04
python使用Flask操作mysql实现登录功能
这篇文章主要介绍了python使用Flask操作mysql实现登录功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-05-05
python单向链表实例详解
这篇文章主要为大家详细介绍了python单向链表实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05

python和js交互调用的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具