Flask之ajax操作示例

怼烎@ 2023-10-18 14:16 76阅读 0赞

\`文末包含源码\`

python3.6，flask使用简例，

目录结构

![20190130151526593.png][]

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")

[20190130151526593.png]: https://img-blog.csdnimg.cn/20190130151526593.png