Flask向后台发送Ajax请求-青柠博客

发送POST请求

引入jQuery

https://www.bootcdn.cn/jquery/

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

发送请求

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/ajax",
    {
      name:"Donald Duck"
    
    },
    function(data,status){
      alert("数据：" + data.data + "\n状态：" + status);
    });
  });
});
</script>

完整代码

后端

from flask import Flask, render_template, request,jsonify

app = Flask(__name__)

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


@app.route('/ajax',methods = ['POST', 'GET'])
def ajax():
   if request.method == 'POST':
      
      user = request.form['name']
      print(user)
      return jsonify({'data':user})
   return render_template('index.html')

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

前端

<!DOCTYPE html>
<html>

<body>

<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>

</body>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/ajax",
    {
      name:"Donald Duck"
    
    },
    function(data,status){
      alert("数据：" + data.data + "\n状态：" + status);
    });
  });
});
</script>
</head>

</html>

成功例子

版权声明 1 本网站名称：青柠博客
2 本站永久网址：https://www.qingningz.cn/
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2362400196进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

编程教程

Flask向后台发送Ajax请求

发送POST请求

引入jQuery

发送请求

完整代码

后端

天气