Python test development - create modal box and save data

Original: FIN Test development community the day before yesterday

What is the modal box?

Mode refers to the frame overlaid on the parent form subform. Can be used for interactive, we often see the modal box used to log on, and so on to determine, in the end is how to achieve this pop-up effect, bootstrap has provided a corresponding component for us.

1, interface prototype

Click Add to bring up the modal box,

And enter the user: tester, message: Hello. Figure 1 below:

▲ 1

Then click Save, then the database is stored in the data entered above to view the user interface of the list shows tester, as shown in Figure 2:

FIG 2 ▲

2, the development process

Next, the above examples, step by step teach you to write code.

First, build a good Python environment --python3, django2, mysql, pycharm, and so on.

A python data model models.py, create a database table to store data

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

Two logic python view view.py, test function for displaying a list of users, savedata saving function is used to trigger data block Click Save mode.

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!')

Three python link url.py, for correlation functions and pages

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

Four front-end template page test.html, front-end display a list of users and js trigger the modal box and save data

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1">
<title>Bootstrap Modal</title>
<link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>

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

   <div class="modal-body">
        <div style="height:300px;overflow:auto;">
           <br><br><br><br>
            <p style="align:center">
                用户: <input style="align:center" type="text" name="name"id="name" required="required"/></p>
            <br>
            <p style="align:center">
                消息: <input style="align:center" type="text" name="message"id="message" required="required"/></p>
            <br>
        </div>
   </div>

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

</div>
</div>
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script type="text/javascript">
        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
                }
            });
        }
   </script>

</body>
</html>

The front end of the key code overview follows

(Note that the code marked red represents the association between the buttons, fields, modal box id, function)

1 create modal box:

2 modal box content:

用户: <inputstyle="align:center" type="text" name="name" id="name" required="required"/></p>

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

3 Js and js function:

<scriptsrc="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<scriptsrc="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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, finished .

Python test development - create modal box and save data

Python test development - create modal box and save data

Guess you like