flask 和 ajax 实例

最新推荐文章于 2023-06-19 10:55:54 发布

夏华东的博客

最新推荐文章于 2023-06-19 10:55:54 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/weixin_44493841/article/details/107688545

版权

flask 和 ajax 实例

项目结构：

$## [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eod6EOwl-1596087970924)(C:\Users\xiahuadong\Documents\csdn博客\flask和ajax实例1.png)]$

test.py

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('test.html')
# 特别注意的是request.args['**']获取get请求的参数
# request.form['**']获取post请求的参数,request.values['**']可以获得两种方式的参数
@app.route('/ajax')
def ajax():
    return 'get获取到' + request.args['name']
# 当两种方式分开写时函数注意不要重名
@app.route('/ajax', methods=['POST'])
def ajax_post():
    return 'post获取到' + request.values['name']
if __name__ == '__main__':
    app.run()

test.html

<!--ajaxIndex.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxIndex</title>
    <script src="../static/jquery-3.4.1.min.js"></script>
    <script src="../static/test.js"></script>
</head>
<body>
    <input type="text" id="namevalue"><br/>
    <button id="btn">send</button>
    结果:<span id="result"></span>
</body>
</html>

test.js

//ajaxIndex.js
$(document).ready(function () {
    $('#btn').on('click',function () {
        //此时使用的是post方式，get方式直接换成get就行
        $.post('/ajax', {name:$('#namevalue').val()}, function(data){
            $('#result').text(data);
        })
    })
})

效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oy7mZS9h-1596087970926)(C:\Users\xiahuadong\Documents\csdn博客\flask和ajax实例2.png)]$

夏华东的博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
flask 和 ajax 实例

flask 和 ajax 实例项目结构：##  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eod6EOwl-1596087970924)(C:\Users\xiahuadong\Documents\csdn博客\flask和ajax实例1.png)]test.pyfrom flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/')def index
复制链接

扫一扫