目录结构如下：
|--|
|--run.py
|--static
|--test.txt
|--templates
|--index.html
前端代码如下：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery Ajax Test</title> <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $(".btn1").click(function(){ $.get("/mystring",function(data, status){ alert("数据: " + data + " 状态: " + status); }); }); $(".btn2").click(function(){ $.get("/mydict",function(data, status){ alert("name: " + data.name + " age:" + data.age); }); }); $(".btn3").click(function(){ $.get("/mylist",function(data, status){ alert("name: " + data[0]+ " age:" + data[1]); }); }); $(".btn4").click(function(){ $.ajax({url:"/mystring", data:{"mydata": "test"},success:function(data){ alert(data); }}); }); $(".btn6_2").click(function(){ $.ajax({url:"/dataFromAjax", data:{"mydata": "test data"},success:function(data){ alert(data); }}); }); $(".btn5").click(function(){ $.ajax({url:"/mydict", success:function(data){ alert("name: " + data.name + " age:" + data.age); }}); }); $(".btn6").click(function(){ $.ajax({url:"/mylist", success:function(data){ alert("name: " + data[0] + " age:" + data[1]); }}); }); $(".btn7").click(function(){ $("p").load("../static/test.txt"); }); $(".btn10").click(function(){ $("p").load("/mystring"); }); $(".btn8").click(function(){ $.getJSON("/mydict",function(data){ $.each(data, function(i, field){ $("div").append(field + " "); }); }); }); $(".btn9").click(function(){ $.post("/mydict", function(data, status){ alert("name: " + data.name + " age:" + data.age); }); }); }); </script> </head> <body> <h1>Ajax Test</h1> <button class="btn1">get string</button> <button class="btn2">get dict</button> <button class="btn3">get list</button> <br/><br/> <button class="btn4">ajax string</button> <button class="btn5">ajax dict</button> <button class="btn6">ajax list</button> <button class="btn6_2">ajax sentDataToFlask</button><br/><br/> <p>load:</p> <button class="btn7">load from file</button> <button class="btn10">load</button><br/><br/> <div>getJson: </div><br/> <button class="btn8">getJson</button><br/><br/> <button class="btn9">post</button> </body> </html>
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方法。