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 14 Python
Python3 max()函数基础用法
Feb 19 Python
Python2和3字符编码的区别知识点整理
Aug 08 Python
决策树剪枝算法的python实现方法详解
Sep 18 Python
Python OrderedDict的使用案例解析
Oct 25 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
Nov 20 Python
Pytorch训练过程出现nan的解决方式
Jan 02 Python
Python实现大数据收集至excel的思路详解
Jan 03 Python
pandas.DataFrame.drop_duplicates 用法介绍
Jul 06 Python
python使用numpy中的size()函数实例用法详解
Jan 29 Python
Python基于Tkinter开发一个爬取B站直播弹幕的工具
May 06 Python
浅析Python OpenCV三种滤镜效果
Apr 11 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配置文件中最常用四个ini函数
2007/03/19 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP速成大法
2015/01/30 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
详解JS数值Number类型
2018/02/07 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python实现汽车管理系统
2018/11/30 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
公证委托书大全
2014/04/04 职场文书
任命书格式
2014/06/05 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers