Flask之ajax操作示例

最新推荐文章于 2024-06-26 14:02:33 发布

JavaPub-rodert

最新推荐文章于 2024-06-26 14:02:33 发布

阅读量6.2k

点赞数 1

分类专栏： flask python 文章标签： flask

JavaPub 分享技术和副业，搜索、爬虫、逆向、web等，及服务端技术教程。

本文链接：https://blog.csdn.net/qq_40374604/article/details/86703693

版权

python 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

flask

4 篇文章 0 订阅

订阅专栏

`文末包含源码`

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