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 相关文章推荐
一个检测OpenSSL心脏出血漏洞的Python脚本分享
Apr 10 Python
python单元测试unittest实例详解
May 11 Python
简单上手Python中装饰器的使用
Jul 12 Python
Python中Iterator迭代器的使用杂谈
Jun 20 Python
Python常用字符串替换函数strip、replace及sub用法示例
May 21 Python
Django后台获取前端post上传的文件方法
May 28 Python
python脚本实现验证码识别
Jun 07 Python
python 自定义对象的打印方法
Jan 12 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
Aug 12 Python
详解Python Opencv和PIL读取图像文件的差别
Dec 27 Python
Python多线程通信queue队列用法实例分析
Mar 24 Python
最新pycharm安装教程
Nov 18 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将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
英文求职信结束语大全
2013/10/26 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
一文搞懂php的垃圾回收机制
2021/06/18 PHP
MySQL数据库事务的四大特性
2022/04/20 MySQL
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js