Python學習第160天（模態對話方塊資訊輸入）
阿新 • • 發佈：2020-09-19
昨天對基本的樣式美化了，基本算是漂亮了，今晚把對應的作用後臺功能完善了，同時增加了自動檢查輸入資訊格式是否存在錯誤的情況，大致的情況是這樣的。
此時可以看到，年齡必須是一個數字，所以輸入漢字的時候會導致後臺無法儲存，從而使程式報錯，所以增加這樣的一個資訊框，即提示了錯誤，又避免了後臺程式執行錯誤。
一、對應的原始碼
url：
re_path('^add_student.html',students.add_student)
後臺方法：
def add_student(req): respon = {'status':True,'message':None}try: u = req.POST.get('username') a = req.POST.get('age') g = req.POST.get('gender') c = req.POST.get('cs_id') print(u, a, g, c) models.Students.objects.create( username=u, age=a, gender=g, cs_id=c ) except Exceptionas e: respon['status'] = False respon['message'] = '使用者輸入資訊格式錯誤' import json result = json.dumps(respon,ensure_ascii=False) return HttpResponse(result)
前端資訊：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"> <style> .bbq { padding: 0px 20px; } </style> </head> <body> <div class="container"> <div style="padding: 10px 0px"> <a class="btn btn-info" href="add_students.html">新增學生</a> <a class="btn btn-info" id="addBtn">新增學生（新）</a> </div> <div> <table class="table table-hover table-striped" border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>班級</th> <th>操作</th> </tr> </thead> <tbody> {% for row in stu_list %} <tr class=""> <td> {{ row.id }} </td> <td> {{ row.username }} </td> <td> {{ row.age }} </td> <td> {{ row.gender }} </td> <td> {{ row.cs.titile }} </td> <td> <a class="glyphicon glyphicon-remove bbq" href="/del_students.html?nid={{ row.id }}" style="font-size:15px">刪除</a> <a class="glyphicon glyphicon-wrench bbq" href="/edit_students.html?nid={{ row.id }}" style="font-size: 15px">編輯</a> </td> </tr> {% endfor %} </tbody> </table> </div> <!-- Modal --> <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">新增學生</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="username" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">年齡</label> <div class="col-sm-10"> <input type="text" class="form-control" name="age" id="age_message" placeholder="年齡"> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" value="1">男 </label> <label class="radio-inline"> <input type="radio" name="gender" value="0">女 </label> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">班級</label> <div class="col-sm-10"> <select class="form-control" name="cs_id"> <option value="1"> {% for row in cs_list %} <option value="{{ row.id }}">{{ row.titile }}</option> {% endfor %} </select> </div> </div> </form> </div> <div class="modal-footer"> <span style="color: red" id="errorMessage"></span> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="btnSave">儲存</button> </div> </div> </div> </div> <script src="/static/js/jquery-3.1.1.js"></script> <script src="/static/plugins/bootstrap/js/bootstrap.js"></script> <script> $(function () { bindEvent(); bindSave() }); function bindEvent() { $('#addBtn').click(function () { $('#addModal').modal('show'); }) } function bindSave() { $('#btnSave').click(function () { var postData = {}; $('#addModal').find('input,select').each(function () { console.log($(this)[0]); var v = $(this).val(); var n = $(this).attr('name'); if (n=='gender'){ if ($(this).prop('checked')){ postData[n]=v; } }else{ postData[n]=v; } }) console.log(postData) $.ajax({ url:'/add_student.html', type:'POST', data:postData, success:function (arg) { console.log(arg); //返回的arg其實就是respon = {'status':True,'message':None}經過json處理後的字串 //此時返回的arg格式是一個字串 //JSON.parse的作用就是將arg轉換成為一個字典 //相當於python當中的json.loads() var dict = JSON.parse(arg); if(dict.status){ window.location.reload() }else { $('#errorMessage').text(dict.message) } } }) }) } </script> </div> </body> </html>
二、重要的幾個易錯點
1.模態對話方塊內容的獲取
2.如何顯示錯誤資訊
3.關於span標籤內容
<span style="color: red" id="errorMessage"></span>
以上就是今天的全部內容。