python flask 整合bootstrap用ajax 发起请求

最新推荐文章于 2024-05-13 14:54:22 发布

安静的镜子

最新推荐文章于 2024-05-13 14:54:22 发布

阅读量143

点赞数

分类专栏： python 文章标签： python flask bootstrap

本文链接：https://blog.csdn.net/weixin_42883164/article/details/130227451

版权

python 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.html

              <div class="row">
                  <div class="col-sm-6" id="myTable">
                      <section class="panel">
                          <header class="panel-heading row align-items-center" style="display: flex">
                              <div style="flex: 9"><span>用户信息</span></div>
                              <div style="flex: 1">
                              </div>
                          </header>
                          <table class="table">
                              <thead>
                                <tr>
                                  <th>#</th>
                                  <th>{{ data.firstName }}</th>
                                  <th>{{ data.lastName }}</th>
                                  <th>{{ data.userName }}</th>
                                  <th>编辑</th>
                              </tr>
                              </thead>
                              <tbody>
                              {% for user in data.users %}
                                <tr>
                                  <td>{{ user.id }}</td>
                                  <td>{{ user.firstName }}</td>
                                  <td>{{ user.lastName }}</td>
                                  <td>{{ user.userName }}</td>
                                  <td class="row align-items-center">
                                      <button class="btn btn-primary" onclick='userDelete({{ user.id }})' >  删除</button>
                                  </td>
                              </tr>
                              {% endfor %}
                              </tbody>
                          </table>
                      </section>
                  </div>

              </div>

2.script

 <script>
        function userDelete(id){
            var data={
                "id":id
            }
            var dataStr=JSON.stringify(data)
            $.ajax({
                url: '/table/deleteUser',
                type: 'POST',
                dataType: 'JSON',
                headers: { 'Content-Type': 'application/json' },
                data:dataStr,
                success: function(response){
                    alert(response);
                }
            });

        }
    </script>

3.service

from models import User, db

class UserService:

    @staticmethod
    def delete_user(user_id):
        user = UserService.get_user_by_id(user_id)
        db.session.delete(user)
        db.session.commit()

4.controller

@table_blueprint.route('/table/deleteUser', methods=['POST'])
def tables_deleteuser():
    # 获取请求中的 JSON 数据并转换为 Python 字典
    user_data = request.get_json()
    UserService.delete_user(user_data['id'])
    return "删除成功！"

5.示例：
在这里插入图片描述