用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('删除成功！')