python和js交互調(diào)用的方法
后臺代碼都是利用的
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與后臺交互，設(shè)置不同的參數(shù)，可以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’)
這樣就很輕松的實現(xiàn)了前端與后臺的交互
本質(zhì)上，前端與后端交互都是通過json完成的
至于表單提交，就不需要寫js了，在form表單里面有有一個submit類型按鈕，點擊時，會自動提交到后臺對應(yīng)的路由上進行處理。對于表單提交，后臺可以用
s=request.form.get(’username’,None)
來捕捉前端網(wǎng)頁的值。但是如果是非表單提交，則需要用js獲取值后，通過data參數(shù)傳入到后端才行。
實例擴展：
python使用flask與js進行前后臺交互的例子
flask與js進行前后臺交互代碼如下,后臺給前端發(fā)數(shù)據(jù)：
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'>數(shù)據(jù)展示：</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>
到此這篇關(guān)于python和js交互調(diào)用的方法的文章就介紹到這了,更多相關(guān)python和js如何交互內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP.NET MVC把數(shù)據(jù)庫中枚舉項的數(shù)字轉(zhuǎn)換成文字2. ASP.NET Core自定義中間件的方式詳解3. 《CSS3實戰(zhàn)》筆記--漸變設(shè)計（一)4. 用xslt+css讓RSS顯示的跟網(wǎng)頁一樣漂亮5. 教你JS更簡單的獲取表單中數(shù)據(jù)(formdata)6. Ajax實現(xiàn)異步加載數(shù)據(jù)7. 測試模式 - XSL教程 - 58. html5手機觸屏touch事件介紹9. CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效10. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例
網(wǎng)公網(wǎng)安備