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_templateimport 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如何交互內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備