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如何交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
pyv8学习python和javascript变量进行交互
python取得javascript里面的值 复制代码 代码如下: import PyV8 with PyV8.JSContext() as env1: env1.eval(""" var_i = 1; var_f = 1.0; var_s = "test"; var_b = true; ""
-
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['
-
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[
-
Android中WebView与Js交互的实现方法
获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名
-
Android中webview与JS交互、互调方法实例详解
Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这
-
Android WebView使用方法详解 附js交互调用方法
目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1
-
Android webview和js互相调用实现方法
Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5
-
Android与JS相互调用的方法
目录 Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数. 下面是JS同Android的通信,JS调用Android的函数方法. Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数. private void InitWebView() { mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebVi
-
Android webview和js互相调用实现方法
Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5
-
python与C互相调用的方法详解
前言 最近因为工作的需要,在考虑基于udp做一个用于网游战斗中的数据同步协议,为了前期测试数据,决定先做一个外部的代理tunnel,原理是在server端和client端分别建立网络转发proxy,即原来的C/S连接改为两个proxy之间数据快速传输.因为udp库是用C++写的代码,在测试数据的时候需要不断地修改参数,重新编译,修改输出统计数据制表等,不胜其烦,最终决定导出接口由python脚本来进行逻辑调用.下面话不多说,来一起看看详细的介绍: C/C++导出到python有多种方法,根据不同
-
更改Python命令行交互提示符的方法
一.定制Python的交互提示符 Python的默认交互提示符为">>>",但它是可以定制的. Python启动后,先寻找PYTHONSTARTUP环境变量,然后执行此文件中变量指定的执行代码. 一些Linux发布包提供了缺省的启动脚本,一般存放在其home目录,名为.pythonstartup."Tab完成"和"命令历史"这两个功能增强了提示符应用,两者都基于readline模块. 如果没有.pythonstartup文件,可
-
python+opencv实现摄像头调用的方法
最近入了一块树莓派,想让其实现摄像头的调用,因此写下此博客备忘 一.树莓派网络的配置 首先,对树莓派进行网络配置,否则就无法进行软件的安装 我们知道,ifconfig命令可以修改ip地址.子网掩码等信息,但是当设备重启之后必须重新设置 因此,我们使用如下方法进行网络配置 修改/etc/network/interfaces 其中,红色框选中的为需要修改的部分 auto eth0 //设为开机启动eth0 iface eth0 inet static //设为静态ip address 10.215.