AJAX局部刷新和异步技术

用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局部刷新和异步技术

猜你喜欢