ajax结合sweetalert弹出框删除数据

思路：????????????

1.创建一个新的django项目(记得写应用项目app01)

2.将settings中的csrf注掉

3.创建一个static文件夹，将dist和bootstrap复制进来(这些需要到项目sweetalert中copy进来)

3.到settings文件中进行static的配置，

　　STATICFILES_DIRS=[

os.path.join(BASE_DIR,'static')

]

4.每创建的templates中html文件

{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'dist/sweetalert.min.js' %}"></script>

5.创建models模型表

from django.db import models


# Create your models here.


class User(models.Model):
    username = models.CharField(max_length=32)
    age = models.IntegerField()
    choices = (
        (1, '男'), (2, '女'), (3, '其他')
    )
    gender = models.IntegerField(choices=choices)

6.执行数据库迁移命令：python manage.py makemigrations python manage.py migrate

7.使用django的小型数据库，在表中添加数据

8.写路由：

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^userlist/',views.userlist)
]

9.视图函数：先返回一个页面

from django.shortcuts import render


# Create your views here.


from app01 import models

def userlist(request):
    user_list = models.User.objects.all()
    return render(request, 'userlist.html', locals())

10.创建html页面（展示数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/font-awesome/5.8.2/js/fontawesome.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'dist/sweetalert.min.js' %}"></script>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">数据展示</h2>
            <table class="table-striped table table-hover table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>主键</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for user in user_list %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ user.pk }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.age }}</td>
                    <td>{{ user.get_gender_display }}</td>
                    <td>
                        <button class="btn btn-primary btn-sm">编辑</button>
                        <button class="btn btn-danger btn-sm " }>删除</button>

                    </td>
                </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>

</script>

</body>
</html>

11.点击删除按钮有弹出框

ajax结合sweetalert弹出框删除数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/font-awesome/5.8.2/js/fontawesome.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'dist/sweetalert.min.js' %}"></script>
 
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">数据展示</h2>
            <table class="table-striped table table-hover table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>主键</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for user in user_list %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ user.pk }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.age }}</td>
                    <td>{{ user.get_gender_display }}</td>
                    <td>
                        <button class="btn btn-primary btn-sm">编辑</button>
                        <button class="btn btn-danger btn-sm del" user_id = '{{ user.pk }}'>删除</button>

                    </td>
                </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>


<script>
     $('.del').click(function () {
      swal({'标题'，‘内容’，'success'})
    })
</script>

</body>
</html>

会发生以下错误

ajax结合sweetalert弹出框删除数据

改进：

ajax结合sweetalert弹出框删除数据　　

加了style标签修改

ajax结合sweetalert弹出框删除数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/font-awesome/5.8.2/js/fontawesome.min.js"></script>

    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'dist/sweetalert.min.js' %}"></script>
  <style>
        div.sweet-alert h2{
            padding-top: 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">数据展示</h2>
            <table class="table-striped table table-hover table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>主键</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for user in user_list %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ user.pk }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.age }}</td>
                    <td>{{ user.get_gender_display }}</td>
                    <td>
                        <button class="btn btn-primary btn-sm">编辑</button>
                        <button class="btn btn-danger btn-sm del" user_id = '{{ user.pk }}'>删除</button>

                    </td>
                </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>


<script>
     $('.del').click(function () {
      swal({'标题'，‘内容’，'success'})
    })
</script>

</body>
</html>

View Code