Flask和Ajax的交互

这是复制粘贴过来的 原博转：http://www.cnblogs.com/bayueman/p/6612122.html

Flask---ajax(jquery)交互

　　

目录结构如下：

|--|
   |--run.py
   |--static
      |--test.txt
   |--templates
      |--index.html

 

前端代码如下：

index.html

"en">

    "UTF-8">
    
    




    
Ajax Test
    class="btn1">get string
    class="btn2">get dict
    class="btn3">get list 


    class="btn4">ajax string
    class="btn5">ajax dict
    class="btn6">ajax list
    class="btn6_2">ajax sentDataToFlask


    
load:
    class="btn7">load  from file
    class="btn10">load


    
getJson: 

    class="btn8">getJson


        class="btn9">post

 

 

PS: test..txt 文件放在flask工程的static文件夹下。

Flask后端代码如下：

run.py

 

from flask import Flask, render_template, request
from flask import jsonify

app = Flask(__name__)
app.config['SECRET_KEY'] = "dfdfdffdad"

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

@app.route('/mystring')
def mystring():
    return 'my string'

@app.route('/dataFromAjax')
def dataFromAjax():
    test = request.args.get('mydata')
    print(test)
    return 'dataFromAjax'

@app.route('/mydict', methods=['GET', 'POST'])
def mydict():
    d = {'name': 'xmr', 'age': 18}
    return jsonify(d)

@app.route('/mylist')
def mylist():
    l = ['xmr', 18]
    return jsonify(l)


if __name__ == '__main__':
    app.run()

运行run.py，在浏览器打开http://127.0.0.1:5000/点击页面上的按钮即可测试不同的jQuery封装的ajax方法。

 

下载代码： https://github.com/xmanrui/FlaskConnectAjax