大數(shù)據(jù)開(kāi)發(fā)工程師vx

是 否 +2 論壇幣

k人 參與回答

經(jīng)管之家送您一份

應(yīng)屆畢業(yè)生專(zhuān)屬福利!

求職就業(yè)群

趙安豆老師微信：zhaoandou666

經(jīng)管之家聯(lián)合CDA

送您一個(gè)全額獎(jiǎng)學(xué)金名額~ !

立即領(lǐng)取

感謝您參與論壇問(wèn)題回答

經(jīng)管之家送您兩個(gè)論壇幣！

+2 論壇幣

## 大數(shù)據(jù)開(kāi)發(fā)工程師

后臺(tái)代碼都是應(yīng)用的

1 2 3 4 5 6 7 8

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代碼如下

?

1 2 3 4 5 6

# 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)能方式】運(yùn)用jquery的ajax與后臺(tái)交互，設(shè)置不同的參數(shù)，能夠get也能夠post

上面的例子用ajax方式，前端代碼如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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)代碼不便仍然是

?

1 2 3 4 5 6

# 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如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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)代碼如下：

?

1 2 3 4 5

# ajax ，post方式與js交互（表單提交） @app.route('/login',methods=['POST']) def login():   log.info('lalal')   return jsonify(username='xixi',pwd='123')

這樣就很輕松的完成了前端與后臺(tái)的交互

實(shí)質(zhì)上，前端與后端交互都是經(jīng)過(guò)json完成的

至于表單提交，就不需求寫(xiě)js了，在form表單里面有有一個(gè)submit類(lèi)型按鈕，點(diǎn)擊時(shí)，會(huì)自動(dòng)提交到后臺(tái)對(duì)應(yīng)的路由上停止處置。關(guān)于表單提交，后臺(tái)能夠用

?

1	s=request.form.get('username',None)

來(lái)捕捉前端網(wǎng)頁(yè)的值。但是假如是非表單提交，則需求用js獲取值后，經(jīng)過(guò)data參數(shù)傳入到后端才行。

實(shí)例擴(kuò)展：

python運(yùn)用flask與js停止前后臺(tái)交互的例子

flask與js停止前后臺(tái)交互代碼如下,后臺(tái)給前端發(fā)數(shù)據(jù)：

python局部：

?



鏈接：https://pan.baidu.com/s/1It6rkyGirjwJD4mYRwwogw
提取碼：ey6b
--來(lái)自百度網(wǎng)盤(pán)超級(jí)會(huì)員V4的分享

掃碼加我 拉你入群

請(qǐng)注明：姓名-公司-職位

以便審核進(jìn)群資格，未注明則拒絕

分享0 收藏0 回帖

關(guān)鍵詞：開(kāi)發(fā)工程師 數(shù)據(jù)開(kāi)發(fā) 工程師 大數(shù)據(jù) Application