python和js交互調(diào)用的方法
后臺(tái)代碼都是利用的
1.【get方式】使用jquery的get json與后臺(tái)交互
前端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.【萬(wàn)能方式】使用jquery的ajax與后臺(tái)交互，設(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 ’) }});
后臺(tái)代碼不便依然是
# 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補(bǔ)充一個(gè)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 ’)} }); }
后臺(tái)代碼如下：
# ajax ，post方式與js交互（表單提交）@app.route(’/login’,methods=[’POST’])def login(): log.info(’lalal’) return jsonify(username=’xixi’,pwd=’123’)
這樣就很輕松的實(shí)現(xiàn)了前端與后臺(tái)的交互
本質(zhì)上，前端與后端交互都是通過(guò)json完成的
至于表單提交，就不需要寫(xiě)js了，在form表單里面有有一個(gè)submit類(lèi)型按鈕，點(diǎn)擊時(shí)，會(huì)自動(dòng)提交到后臺(tái)對(duì)應(yīng)的路由上進(jìn)行處理。對(duì)于表單提交，后臺(tái)可以用
s=request.form.get(’username’,None)
來(lái)捕捉前端網(wǎng)頁(yè)的值。但是如果是非表單提交，則需要用js獲取值后，通過(guò)data參數(shù)傳入到后端才行。
實(shí)例擴(kuò)展：
python使用flask與js進(jìn)行前后臺(tái)交互的例子
flask與js進(jìn)行前后臺(tái)交互代碼如下,后臺(tái)給前端發(fā)數(shù)據(jù)：
python部分：
# -*- coding: utf-8 -*-from flask import Flask,jsonify,render_templateimport json app = Flask(__name__)#實(shí)例化app對(duì)象 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都可以訪問(wèn) 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)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. Docker究竟是什么 為什么這么流行 它的優(yōu)點(diǎn)和缺陷有哪些？2. ASP.NET MVC實(shí)現(xiàn)城市或車(chē)型三級(jí)聯(lián)動(dòng)3. 用python登錄帶弱圖片驗(yàn)證碼的網(wǎng)站4. Python使用Pyqt5實(shí)現(xiàn)簡(jiǎn)易瀏覽器(最新版本測(cè)試過(guò))5. python軟件測(cè)試Jmeter性能測(cè)試JDBC Request(結(jié)合數(shù)據(jù)庫(kù))的使用詳解6. .NET 6實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的示例詳解7. 如何使用瀏覽器擴(kuò)展篡改網(wǎng)頁(yè)中的JS 文件8. Element ui tree(樹(shù))實(shí)現(xiàn)父節(jié)點(diǎn)選中時(shí)子節(jié)點(diǎn)不選中父節(jié)點(diǎn)取消時(shí)子節(jié)點(diǎn)自動(dòng)取消功能9. 如何在.net6webapi中使用自動(dòng)依賴注入10. Java 二分查找算法的實(shí)現(xiàn)
網(wǎng)公網(wǎng)安備