python和js交互调用的方法


Posted in Python onJune 23, 2020

后台代码都是利用的

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通过递归遍历出集合中所有元素的方法
Feb 25 Python
python使用PyGame模块播放声音的方法
May 20 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
Apr 15 Python
安装Python和pygame及相应的环境变量配置(图文教程)
Jun 04 Python
PyQt4实现下拉菜单可供选择并打印出来
Apr 20 Python
python 实现分页显示从es中获取的数据方法
Dec 26 Python
Python之修改图片像素值的方法
Jul 03 Python
Matplotlib.pyplot 三维绘图的实现示例
Jul 28 Python
浅析NumPy 切片和索引
Sep 02 Python
scrapy中如何设置应用cookies的方法(3种)
Sep 22 Python
Django URL参数Template反向解析
Nov 24 Python
python 实现ping测试延迟的两种方法
Dec 10 Python
virtualenv介绍及简明教程
Jun 23 #Python
python不同系统中打开方法
Jun 23 #Python
自学python用什么系统好
Jun 23 #Python
卸载tensorflow-cpu重装tensorflow-gpu操作
Jun 23 #Python
python为什么会环境变量设置不成功
Jun 23 #Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
Jun 23 #Python
解决tensorflow 释放图,删除变量问题
Jun 23 #Python
You might like
php获取操作系统语言代码
2013/11/04 PHP
smarty内置函数section的用法
2015/01/22 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
在Python中使用元类的教程
2015/04/28 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
wxPython中listbox用法实例详解
2015/06/01 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python 链接和操作 memcache方法
2017/03/04 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
机关党员三严三实心得体会
2014/10/13 职场文书
让生命充满爱观后感
2015/06/08 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书