用ajax實現簡單的局部刷新技術：求乘法
稍微簡單的ajax依賴於jQuery 所以首先要導入jQuery包，在寫ajax 代碼塊
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
7 <title>首頁</title>
8 </head>
9 <body>
10 <h4>這是home頁面</h4>
11 <input type="text" id="s1">+
12 <input type="text" id="s2">=
13 <input type="text" id="s">
14 <button type="button" id="b1">提交</button>
15 <script src="/static/jquery-3.3.1.min.js"></script>
16 <script src="/static/bootstrap/js/bootstrap.min.js"></script>
17 <script>
18 $("#b1").on("click",function () { 19 $.ajax({ 20 url:"/ajax_do/", #對應去執行哪個視圖操作 21 type:"GET", #以哪種方式請求 22 data:{"s1":$("#s1").val(),"s2":$("#s2").val()}, #要傳送過去的數據 23 success:function (data) { # data是后台返回的結果 24 $("#s").val(data); #將結果指定給文本框的值 25 } 26 }) 27 }) 28 </script>
29 </body>
30 </html>
后端對應的方法操作：
1 from django.views.decorators.csrf import csrf_exempt 2 @csrf_exempt 3 def home(request): 4 return render(request,'home.html') 5 @csrf_exempt 6 def ajax_do(request): 7 s1=int(request.GET.get('s1')) 8 s2=int(request.GET.get('s2')) 9 print(s1,s2) 10 s=s1*s2 #后台得到的兩個數據進行處理 11 return HttpResponse(s) #結果返回
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
ajax 與 sweetalert的聯合使用 sweetalert是基於jQuery的，動畫效果的消息提示框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
7 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
8 <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
9 <title>列表</title>
10 <style>
11 .sweet-alert>h2{ 12 padding-top: 20px; 13 } 14 </style>
15 </head>
16 <body>
17 <div class="container">
18 <div class="panel panel-primary">
19 <div class="panel-heading">
20 <h3 class="panel-title">用戶列表</h3>
21 </div>
22 <div class="panel-body">
23 <table class="table table-bordered">
24 <thead>
25 <tr>
26 <th>編號</th>
27 <th>姓名</th>
28 <th>年齡</th>
29 <th>生日</th>
30 <th>操作</th>
31 </tr>
32 </thead>
33 <tbody>
34 {% for foo in person %} 35 <tr>
36 <td>{{ foo.pid }} </td>
37 <td>{{ foo.pname }} </td>
38 <td>{{ foo.page }} </td>
39 <td>{{ foo.pbirthday| date:'Y-m-d' }} </td>
40 <td>
41 <button class="btn btn-danger del"><i class="fa fa-trash-o"></i>刪除</button>
42 </td>
43 </tr>
44 {% endfor %} 45
46 </tbody>
47 </table>
48 </div>
49 </div>
50 </div>
51
52 <script src="/static/jquery-3.3.1.min.js"></script>
53 <script src="/static/csrf_ajax.js"></script>
54 <script src="/static/bootstrap/js/bootstrap.min.js"></script>
55 <script src="/static/sweetalert/sweetalert.min.js"></script>
56
57 <script>
58 $(".del").on('click', function () { 59 var $id_ent=$(this).parent().parent(); 60 var del_id=$id_ent.children().eq(0).text(); 61 swal({ 62 title: "確定刪除嗎？", 63 text: "你將無法恢復該數據！", 64 type: "warning", 65 confirmButtonClass:'btn-warning', 66 showCancelButton:true, 67 confirmButtonText: "確定！", 68 cancelButtonText: "取消！", 69 closeOnConfirm: false 70 }, 71 function () { 72 $.ajax({ 73 url:'/del_person/', 74 type:'POST', 75 data:{"id":del_id}, 76 success:function (arg) { 77 swal(arg,"你可以跑路了！！！",'success'); 78 $id_ent.remove() 79 } 80 }) 81 }); 82 }) 83 </script>
84 </body>
85 </html>
對應關系和視圖函數：
1 url(r'^person/$', views.person), 2 url(r'^del_person/$', views.del_person),
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
1 def person(request): 2 person_obj=models.Person.objects.all() 3 return render(request,'student.html',{"person":person_obj}) 4
5 def del_person(request): 6 id=request.POST.get('id') 7 models.Person.objects.filter(pid=id).delete() 8 return HttpResponse('刪除成功！')