Pythonとjsのインタラクティブな呼び出しメソッド

バックグラウンドコードが使用されます

[Getメソッド] jqueryのgetjsonを使用してバックグラウンドと対話します

フロントエンド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、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)returnjsonify(result=a + b)

[普遍的な方法] jqueryのajaxを使用して背景と対話し、さまざまなパラメータを設定し、取得または投稿できます

上記の例では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、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)returnjsonify(result=a + b)

ajaxを使用してpostメソッドの例を補足します

フロントエンドjsは次のとおりです

functiontestmethod(){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、投稿モード、およびjsインタラクション（フォーム送信）
@ app.route('/login',methods=['POST'])
def login():
 log.info('lalal')returnjsonify(username='xixi',pwd='123')

このようにして、フロントエンドとバックエンドの相互作用を簡単に実現できます。

基本的に、フロントエンドとバックエンドの相互作用はすべてjsonを介して行われます

フォーム送信に関しては、jsを記述する必要はありません。フォームフォームには送信タイプボタンがあります。クリックすると、バックグラウンドで対応するルートに自動的に送信され、処理されます。フォームの送信には、背景で使用できます

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

フロントエンドWebページの価値を把握するため。ただし、フォーム以外の送信の場合は、jsを使用して値を取得し、dataパラメーターを介してバックエンドに渡す必要があります。

拡張の例：

前面と背面の相互作用にフラスコとjsを使用するpythonの例

フラスコとjsの間のフロントエンドとバックエンドの相互作用コードは次のとおりであり、バックグラウンドはフロントエンドにデータを送信します。

python部分：

# - *- coding: utf-8-*-from flask import Flask,jsonify,render_template
import json
 
app =Flask(__name__)#アプリオブジェクトをインスタンス化する
 
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():returnrender_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の対話方法に関するその他の関連コンテンツについては、ZaLou.Cnの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後、ZaLouをさらにサポートしていただければ幸いです。 .Cn！