Flask之ajax操作示例_flask 处理 ajex

作者：盐析白兔 | 2024-04-05 20:28:19

踩

flask 处理 ajex

`文末包含源码`

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/367802