jquery 模态框_Python测试开发创建模态框及保存数据

什么是模态框?

     模态框是指的在覆盖在父窗体上的子窗体。可用来做交互,我们经常会看到模态框用来登录、确定等等,到底是怎么实现这种弹出效果,bootstrap已经为我们提供了相应的组件。

1、界面原型

    点击添加,弹出模态框,

    然后输入 用户:tester, 消息:你好。如下图1所示:

63601b93c16b63661f43e477f01a28bb.png

▲图1

    再点击保存,那么数据库就存入了以上输入的数据,查看界面的用户列表会显示tester,如下图2所示:

87df9e919dd796ed48224d19f106e45c.png

▲图2

2、开发过程

接下来根据以上实例,一步一步教你编写代码。

首先搭建好Python环境--python3,django2,mysql,pycharm,等。

 一 python数据模型 models.py,用于创建数据库表存储数据

clasTest(models.Model):
    name = models.CharField('名称', max_length=200)
    message = models.CharField('消息', max_length=200)def __str__(self):return self.name

二 python逻辑处理视图 view.py,test函数用于显示用户列表,savedata函数用于模态框点击保存时触发保存数据。

def test(request):
    users = Test.objects.all()

return render(request, 'test.html',{"users":users})

def savedata(request):if request.method == "POST":
        name = request.POST.get('name', '')
        message = request.POST.get('message', '')
        test_info = Test(name=name, message=message)
        test_info.save()return HttpResponse('save success!')

三 python链接 url.py,用于函数和页面的关联

path('test/',app_uitest_views.test),path('savedata/', app_uitest_views.savedata),

四 前端模板页面 test.html,用于前端展示用户列表及js触发模态框然后数据保存

/span>html>lang="zh-CN">charset="utf-8">http-equiv="X-UA-Compatible"content="IE=edge">name="viewport"content="width=device-width, initial-scale=1">Bootstrap Modalrel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

class= "panel panel-default" >
class= "panel-heading" > 用户列表
class= "panel-body" >type="button"class="list-group-item" data-toggle="modal" data-target="#exampleModal" > 添加
class= "list-group" role= "group" aria-label= "用户列表" > {% for user in users %} type="button" class="list-group-item"data-toggle="modal" data-target="#exampleModal">{{ user.name }} {% endfor %}

class= "modal fade" id= " exampleModal " tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" >

class= "modal-dialog" role= "document" style= " width: 680px; " >
class= "modal-content" >

class= "modal-body" >
style= " height:300px;overflow:auto; " >

style="align:center">用户: style="align:center" type="text" name="name"id="name" required="required"/>

style="align:center">消息: style="align:center" type="text" name="message"id="message" required="required"/>

class= "modal-footer" >type="button"class="btn btn-default" data-dismiss="modal">关闭type="button"class="btn btn-primary" data-dismiss="modal" href="javascript:void(0)" οnclick="savedata()">保存

前端关键代码概览如下

(注意红色标示的代码,代表了按钮,字段,模态框id,函数之间的关联)

1 创建模态框:

exampleModal" > 添加

2 模态框内容:

exampleModal" tabindex="-1"role="dialog" aria-labelledby="exampleModalLabel"> 

用户: name" required="required"/>

消息: message"required="required"/>

关闭

savedata()">保存

3 Js及js函数:

function savedata()

{

           var name = $('#name').val();

           var message = $('#message').val();

           $.ajax({

                url: "/savedata/",

                data:"name="+ name + "&message=" + message,

                headers:{'X-CSRFToken': '{{csrf_token }}'}, //csrf

                contentType:'application/x-www-form-urlencoded; charset=utf-8',

                type: "POST",

                success: function (result) {

                 //  console.log();

                },

                fail: function (result) {

                    debugger

                }

           });

       }

3、完

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值