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实现目录树生成示例
Mar 28 Python
Python中使用strip()方法删除字符串中空格的教程
May 20 Python
在Django中编写模版节点及注册标签的方法
Jul 20 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
Jul 20 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
Apr 23 Python
python中yaml配置文件模块的使用详解
Apr 27 Python
selenium+python设置爬虫代理IP的方法
Nov 29 Python
python Pandas库基础分析之时间序列的处理详解
Jul 13 Python
Python如何定义有可选参数的元类
Jul 31 Python
python 对象真假值的实例(哪些视为False)
Dec 11 Python
Python 中random 库的详细使用
Jun 03 Python
python库sklearn常用操作
Aug 23 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
Python深入学习之装饰器
2014/08/31 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
Python partial函数原理及用法解析
2019/12/11 Python
python django中8000端口被占用的解决
2019/12/17 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
二手书店创业计划书
2014/01/16 职场文书
师德个人剖析材料
2014/02/02 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
导游词之河北邯郸
2019/09/12 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers