Flask---ajax，jquery交互
目录结构如下：
|--|
|--run.py
|--static
|--test.txt
|--templates
|--index.html前端代码如下：
index.html
<!DOCTYPE html>
<html >
<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 + "\n状态: " + 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方法。
- 上一篇 »Jquery基础之ajax
- 下一篇 »React---发送Ajax请求