快捷導(dǎo)航

python和js交互調(diào)用的方法

更新時間：2020年06月23日 15:34:46 作者：silencement

在本篇文章里小編給大家整理了關(guān)于python和js交互調(diào)用的方法，需要的方法可以參考學(xué)習(xí)下。

后臺代碼都是利用的

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補(bǔ)充一個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')

這樣就很輕松的實(shí)現(xiàn)了前端與后臺的交互

本質(zhì)上，前端與后端交互都是通過json完成的

至于表單提交，就不需要寫js了，在form表單里面有有一個submit類型按鈕，點(diǎn)擊時，會自動提交到后臺對應(yīng)的路由上進(jìn)行處理。對于表單提交，后臺可以用

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

來捕捉前端網(wǎng)頁的值。但是如果是非表單提交，則需要用js獲取值后，通過data參數(shù)傳入到后端才行。

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

python使用flask與js進(jìn)行前后臺交互的例子

flask與js進(jìn)行前后臺交互代碼如下,后臺給前端發(fā)數(shù)據(jù)：

python部分：

# -*- coding: utf-8 -*-
from flask import Flask,jsonify,render_template
import json
 
app = Flask(__name__)#實(shí)例化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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: