Flask之ajax操作示例

rodertW發表於2019-01-30
Flask

python3.6，flask使用簡例，

 目錄結構

index2.html 

<html><head>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type=text/javascript src="{{
        url_for('static', filename='jquery.js') }}"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
</head>
<body>
    <script type=text/javascript>
        $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
      </script>


<script type=text/javascript>
    $(function() {
      $('a#calculate').bind('click', function() {
        $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
          a: $('input[name="a"]').val(),
          b: $('input[name="b"]').val()
        }, function(data) {
          $("#result").text(data.result);
        });
        return false;
      });
    });
  </script>
  <h1>jQuery Example</h1>
  <p><input type=text size=5 name=a> +
     <input type=text size=5 name=b> =
     <span id=result>?</span>
  <p><a href=# id=calculate>calculate server side</a>
</body>

myserver2.py

# coding:utf-8

from flask import *
from flask import request

app = Flask(__name__)

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

@app.route('/')
def index():
    html=render_template('index2.html')
    return html

@app.route('/test_post', methods=['GET', 'POST'])
def test_post():
    return '{"name":"zhangsan"}'

if __name__=='__main__':
    app.run(debug=True,host="0.0.0.0")

 

相關文章