Ajax技術使用之ajax與模態框結合的妙用
阿新 • • 發佈：2019-03-05
dism checkbox 學生 反序 路徑 highlight eth result ali
Ajax技術使用之ajax與模態框結合的妙用
要求：
使用ajax的方式提交數據：https://www.cnblogs.com/-wenli/p/10470063.html
使用模態框完成增加數據，能完成增加，刪除與修改也就很簡單了。
HTML代碼
關於在django中引用靜態文件：https://www.cnblogs.com/-wenli/p/10470063.html
關於使用的css樣式：https://v3.bootcss.com/css/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5 {%load staticfiles%} 6 <link rel="stylesheet" href="{% static ‘/plugins/bootstrap-3.3.7-dist/css/bootstrap.css‘ %}"> 7 <link rel="stylesheet" href="{% static ‘/plugins/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css‘ %}"> 8 <script src="{% static ‘/js/jquery/jquery-3.3.1.js‘ %}"></script> 9 <title>Title</title> 10 </head> 11 <body> 12 13 <div class="container"> 14 <div> 15 <a type="button" class="btn btn-primary" id="addBtn">添加</a> 16 </div> 17 <div> 18 <table border="1" class="table table-bordered"> 19 <thead> 20 <tr> 21 <th>ID</th> 22 <th>姓名</th> 23 <th>年齡</th> 24 <th>性別</th> 25 <th>班級</th> 26 <th>住址</th> 27 <th>行為</th> 28 </tr> 29 </thead> 30 <tbody> 31 {% for row in stu_list %} 32 <tr> 33 <td> 34 {{ row.id }} 35 </td> 36 <td> 37 {{ row.username }} 38 </td> 39 <td> 40 {{ row.age }} 41 </td> 42 <td> 43 {{ row.gender }} 44 </td> 45 <td> 46 {{ row.cs.title }} 47 </td> 48 <td> 49 {{ row.address }} 50 </td> 51 <td> 52 <a type="button" class="btn btn-primary" href="/delstudent.html?nid={{ row.id }}">刪除</a> 53 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 54 <a type="button" class="btn btn-primary" href="/altstudent.html?nid={{ row.id }}">編輯</a> 55 <span class="fa fa-edit" aria-hidden="true"></span> 56 57 </td> 58 </tr> 59 {% endfor %} 60 </tbody> 61 </table> 62 </div> 63 </div> 64 65 <!--<!– Button trigger modal –>--> 66 <!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">--> 67 <!--Launch demo modal--> 68 <!--</button>--> 69 <!--默認通過id相同來關聯使用--> 70 <!-- Modal --> 71 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 72 <div class="modal-dialog" role="document"> 73 <div class="modal-content"> 74 <div class="modal-header"> 75 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 76 </button> 77 <h4 class="modal-title" id="myModalLabel">創建學生</h4> 78 </div> 79 80 <div class="modal-body"> 81 82 <div class="form-group"> 83 <label for="exampleInputEmail1">姓名：</label> 84 <input type="text" class="form-control" id="exampleInputEmail1" name="username" placeholder="name"> 85 </div> 86 87 <div class="form-group"> 88 <label for="exampleInput">年齡：</label> 89 <input type="text" class="form-control" id="exampleInput" name="age" placeholder="age"> 90 </div> 91 92 <div class="form-group"> 93 <label for="exampleInputEmail1">性別：</label> 94 <label class="checkbox-inline"> 95 <input type="radio" name="gender" value="1"> 男 96 </label> 97 <label class="checkbox-inline"> 98 <input type="radio" name="gender" value="0"> 女 99 </label> 100 <div> 101 102 103 <div class="form-group"> 104 <select class="form-control" name="class"> 105 {% for row in obj %} 106 <option value="{{ row.id }}">{{ row.title }}</option> 107 {% endfor %} 108 </select> 109 <div> 110 111 <div class="form-group"> 112 <label for="exampleInputEmail1">住址：</label> 113 <input type="text" class="form-control" id="exampleInputaddress" placeholder="address" name="address"> 114 </div> 115 116 </div> 117 <div class="modal-footer"> 118 <span id="errMsg" style="color:red;"></span> 119 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 120 <button type="button" class="btn btn-primary" id="btnSave">確定</button> 121 </div> 122 123 </div> 124 </div> 125 </div> 126 127 <script src="{% static ‘/plugins/bootstrap-3.3.7-dist/js/bootstrap.js‘ %}"></script> 128 <script> 129 <!--#調用函數--> 130 <!--頁面加載完後執行的函數 --> 131 $(function(){ 132 bindEvent(); 133 bindSave(); 134 }); 135 <!--#綁定函數--> 136 function bindEvent(){ 137 $(‘#addBtn‘).click(function(){ 138 $(‘#addModal‘).modal(‘show‘); 139 <!--#通過js的方法調用模態對話框--> 140 }) 141 } 142 function bindSave(){ 143 144 $(‘#btnSave‘).click(function(){ 145 var postData={}; 146 <!--#在id為addModal的標簽下找input與select標簽--> 147 $(‘#addModal‘).find(‘input,select‘).each(function(){ 148 console.log(this); 149 var v =$(this).val(); 150 var n=$(this).attr(‘name‘); 151 if(n==‘gender‘){ 152 if($(this).prop(‘checked‘)){ 153 postData[n]=v; 154 } 155 } 156 else{ 157 postData[n]=v; 158 } 159 }); 160 console.log(postData) 161 162 $.ajax({ 163 url:"/addstudent.html/", 164 type:‘POST‘, 165 data:postData, 166 success:function(arg){ 167 console.log(arg); 168 <!--JSON.parse()將字符串轉換為字典--> 169 var dict=JSON.parse(arg); 170 if(dict.status){ 171 window.location.reload(); 172 } 173 else{ 174 $(‘#errMsg‘).text(dict.message); 175 } 176 177 } 178 }) 179 180 }) 181 182 } 183 184 </script> 185 </body> 186 </html>
視圖函數
1 from django.shortcuts import render,HttpResponse,redirect 2 from app01 import models 3 4 def get_student(request): 5 stu_list = models.Student.objects.all() 6 obj = models.Classes.objects.all() 7 8 print(stu_list) 9 print(obj) 10 # return HttpResponse(‘ok‘) 11 return render(request, "get_student.html", {‘stu_list‘: stu_list,‘obj‘:obj}) 12 def add_student(request): 13 response={‘status‘:True,‘message‘:None} 14 try: 15 name = request.POST.get(‘username‘) 16 age = request.POST.get(‘age‘) 17 gender = request.POST.get(‘gender‘) 18 cs_id = request.POST.get(‘class‘) 19 address = request.POST.get(‘address‘) 20 print(name, age, gender, cs_id, address) 21 models.Student.objects.create(username=name, age=age, gender=gender, cs_id=cs_id, address=address) 22 except Exception as e: 23 response[‘status‘]=False 24 response[‘message‘]=‘用戶輸入錯誤‘ 25 import json 26 result=json.dumps(response,ensure_ascii=False) 27 return HttpResponse(result) 28 # ret=models.Classes.objects.all().values(‘title‘) 29 # for Title in ret: 30 # if Title[‘title‘]==title: 31 # print(Title) 32 33 # 註意這裏是url路徑 34 35 36 37 38 39 def del_student(request): 40 nid = request.GET.get(‘nid‘) 41 print(nid) 42 ret = models.Student.objects.filter(id=nid).delete() 43 print(ret) 44 return redirect(‘/student.html/‘) 45 def alt_student(request): 46 if request.method=="GET": 47 nid = request.GET.get(‘nid‘) 48 obj=models.Student.objects.filter(id=nid)[0] 49 cs_list = models.Classes.objects.all() 50 return render(request,‘alt_student.html‘,locals()) 51 52 elif request.method=="POST": 53 nid=request.GET.get("nid") 54 name = request.POST.get(‘name‘) 55 age = request.POST.get(‘age‘) 56 gender = request.POST.get(‘gender‘) 57 cs_id = request.POST.get(‘class‘) 58 address = request.POST.get(‘address‘) 59 print(name, age, gender, cs_id, address) 60 # models.Student.objects.filter(id=nid).update(username=name,age=age,gender=gender,cs_id=cs_id,address=address) 61 return redirect("/student.html/")
路由
1 from django.contrib import admin 2 from django.urls import path 3 from app01.views import * 4 urlpatterns = [ 5 path(‘altclasses.html/‘,alt_classes), 6 path(‘student.html/‘, get_student), 7 path(‘addstudent.html/‘,add_student), 8 path(‘delstudent.html/‘,del_student), 9 ]
具體實現測試
代碼分析：
使用ajax提交數據
url：提交地址
type：數據傳輸的方式，支持所有http方法
data：傳輸的數據為鍵值對格式
succes：function(arg){
//執行代碼
}
這個函數只有服務端返回的信息到達客戶端才會執行，這個很重要，比如添加完數據，在函數裏自動刷新頁面，如果數據格式錯誤，將服務端返回的信息，在這裏就行處理，顯示到頁面上。
而arg為服務端返回的數據，為字符串
這裏就要補充一下在python下，以及javascript下的序列化。
如果我們使用下面第一種方法，需要自行進行反序列化，JSON.parse()。
如果使用第二種方法：只需要加上dataType:‘JSON‘，ajax自動幫我們完成反序列化。
綁定模態框
找到 id="addModal"的div：為模態框 id="addBtn"的a標簽：為添加按鈕 我們需要為按鈕綁定事件，點擊按鈕就會出現模態框
function bindEvent(){
$(‘#addBtn‘).click(function(){
$(‘#addModal‘).modal(‘show‘);
<!--#通過js的方法調用模態對話框-->
})
}
註意 ： $(‘#addModal‘).modal(‘show‘); 為js的方式打開模態框。
獲取模態框裏的數據，並發送
我們的思路是獲取標簽的name屬性與標簽裏的值，構成字典發送過去，註意這裏面會獲取兩次radio，去掉我們沒有選擇的radio，我們點擊選擇的radio會有屬性。
1.綁定事件，確定的時候提交數據，觸發事件
找到模態框與確定按鈕的id
$(‘#btnSave‘).click(function(
2.創建空字典
var postData={}
3.
首先所有獲取所有的input與select標簽
$(‘#addModal‘).find(‘input,select‘).each(function(
4.
打印獲取到的標簽
將所有標簽的值賦給v
將所有標簽的name屬性的值賦給n
console.log(this); var v =$(this).val(); var n=$(this).attr(‘name‘);
5.
如果n的屬性裏有gender則進行剔除，最後賦值，打印一遍符合要求的標簽
if(n==‘gender‘){
if($(this).prop(‘checked‘)){
postData[n]=v;
}
}
else{
postData[n]=v;
}
});
console.log(postData)
6.最後發送數據。
Ajax技術使用之ajax與模態框結合的妙用