sweetalert模态提示输入框非常美观，我们来学习如何使用它。可以前往官网下载相关代码和阅读相关文档，也可以查看这篇博文，我比较喜欢去哪里看。https://www.yanjiayu.cn/posts/52f4e444.html

代码我喜欢用黄勇封装的代码，使用方便，封装代码完整代码下载

代码的使用：

解压封装好的代码，放到自己的静态文件目录，并在base.html里引用，因为全站使用，所以在覆膜板里引用。

我这里以一个后台CMS添加新闻分类为例介绍使用：

1.建立新闻分类存储表

class NewsCategory(models.Model):
    name = models.CharField(max_length=100)

2.建立后台添加，显示HTML页面这些，并给添加按钮指定一个唯一的ID，便于后面JS获取点击事件

3.新建列表显示的视图

from django.views.decorators.http import require_POST,require_GET #请求方式限制装饰器（非必须）
from apps.news.models import NewsCategory #引入表
from utils import restful #引入错误提示封装的（非必须）

@require_GET
def news_category(request):
    categories = NewsCategory.objects.all()
    context = {
        'categories': categories
    }
    return render(request,'cms/news_category.html',context=context) #显示分类的页面

URL：

path('news_fenlei/', news_category,name='news_fenlei'),#新闻分类

4.建立添加新闻分类的处理视图

@require_POST
def add_news_category(request):
   #获取提交来的name
    name = request.POST.get('name')
   #查看是否已存在
    exists = NewsCategory.objects.filter(name=name).exists()
    if not exists:
      #不存在就添加保存进去
        NewsCategory.objects.create(name=name)
        return restful.ok()
    else:
        return restful.params_error(message='该分类已经存在！')

URL:

path('add_news_fenlei/', add_news_category,name='add_news_fenlei'),#添加新闻分类

5.前端代码做好跳转URL

6.给添加按钮写一个JS，并引入，代码如下：不知道理解得是否完全正确，如有错误，请留言。

function NewsCategory() {

};
// 上面这句是说定义一个叫（1）NewsCategory的函数。
//(2）prototype
NewsCategory.prototype.run = function () {
    var self = this;
    self.listenAddCategoryEvent();
};
//上面这句是说给NewsCategory的运行函数。（3）listenAddCategoryEvent()为下面的方法
//(1).(2).(3)
NewsCategory.prototype.listenAddCategoryEvent = function () {
    var addBtn = $('#add-btn');//获取这个按钮的ID，ID获取用#，类获取用.
    //给这个变量邦一个点击事件
    addBtn.click(function () {
        //调用封装的xfzalert，alertOneInput是封装代码里只有一个输入框的方法
        xfzalert.alertOneInput({
            'title': '添加新闻分类',
            'placeholder': '请输入新闻分类',
            //inpuValue是输入的值
            //confirmCallback向服务器提交
            'confirmCallback': function (inpuValue) {
                //使用封装的ajax代码来提交
                xfzajax.post({
                    //前后/杠不能少，如果url定义的时候尾部/这里就必须有
                    'url': '/cms/add_news_fenlei/',
                    //字典格式传送，name是后台接受的K
                    'data': {
                        'name': inpuValue
                    },
                    //如果成功就打印下结果，并刷新页面
                    'success': function (result) {
                        if(result['code'] === 200){
                            console.log(result);
                            window.location.reload();
                        }else{
                            //失败就关闭模态框
                            xfzalert.close();
                        }
                    }
                });
            }
        });
    });
};

//最后统一执行（1）
$(function () {
    var category = new NewsCategory();
    category.run();
});

JS下载

测试，完成，感觉不错！